Verwenden Sie Javascript, um auf ein Pseudo-Element zu klicken?

Question

Ich frage mich, wie man das Klicken auf ein :before Pseudo-Element aktivieren kann (der orange Teil des div auf der JSfiddle I Link zu unten). Ich habe gelesen, dass, da Pseudo-Elemente nicht im DOM sind, Sie dafür einen Hack benötigen würden. Leider kann ich keinen vorhandenen Stackoverflow Q & A finden, der tatsächlich funktionierenden Code zeigt.

-Link: http://jsfiddle.net/Vv6Eb/4/

HTML:

<div></div> 

CSS:

div { position:relative; background-color:#333; 
     padding:20px; margin:20px; float:left; 
} 

div:before { content:""; display:block; 
    padding:5px; background-color:#f60; border:2px solid white; 
    position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px; 
} 

Answer 1

Eine Abhilfe für dieses wäre, dynamisch eine <span> dem Element anhängen und einen Klick-Methode zuweisen. Like this fiddle.

var item = $('<span />'); 
item.click(function() { alert('click'); }); 
$('div').append(item); 

CSS

div { position:relative; background-color:#333; 
     padding:20px; margin:20px; float:left; 
} 

div span { content:""; display:block; 
    padding:5px; background-color:#f60; border:2px solid white; 
    position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px; 
} 

Answer 2

Ich weiß, dass Sie versuchen, zu verwenden: vor, aber für diese Situation kann nicht einfach erstellen ein neues div mit einer Klasse, die als Hook verwendet wird und an das ursprüngliche div angefügt wird?

So etwas wie dies funktionieren könnte:

var newDiv = $("<div class='orangeCircle'>"); 
$(".parentDivToOrangeCircle").append(newDiv); 

Und die CSS:

.parentDivToOrangeCircle { position:relative; background-color:#333; 
    padding:20px; margin:20px; float:left; 
} 

.orangeCircle { 
    padding:5px; background-color:#f60; border:2px solid white; 
    position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px; 
} 

Answer 3

Wenn Sie wissen, wo der Kreis sein "sollte", Sie Trigonometrie verwenden können, um zu sehen, ob der Klick innerhalb des Kreises ist: http://jsfiddle.net/Vv6Eb/19/

$("div").click(function(e){ 
    var $me = $(this), 
     width = $me.outerWidth(), 
     height = $me.outerHeight(), 
     top = $me.position().top, 
     left = $me.position().left; 

    var len = Math.sqrt(Math.pow(width - e.offsetX, 2) + Math.pow(e.offsetY, 2)); 

    if (len < 10) 
     alert('ding'); 
});​