Użyj javascript, aby kliknąć pseudoelement?

Question

Zastanawiam się, jak włączyć kliknięcie na pseudoelementu :before (pomarańczowa część elementu div na łączu JSfiddle I poniżej). Czytałem, że ponieważ pseudoelementy nie znajdują się w DOM, potrzebujesz do tego hackowania. Niestety, nie mogę znaleźć istniejącego Stackoverflow Q & A, który faktycznie pokazuje działający kod.

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

Rozwiązaniem tego byłoby dynamicznie dołączyć <span> do elementu i przypisanie metody kliknij, aby ją. 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

wiem, że próbują wykorzystać: przed, ale w tej sytuacji, nie można po prostu stworzyć nowy div z klasą do użycia jako hak i dołączenie go do oryginalnej div?

Coś jak to może działać:

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

I 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

Jeśli wiesz, gdzie krąg "powinno" być, można użyć trygonometrii aby sprawdzić, czy kliknięcie jest w kręgu: 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'); 
});​