Use javascript para hacer clic en un pseudo-elemento?

Question

Me pregunto cómo habilitar el clic en un pseudo-elemento :before (la parte naranja del div en el enlace JSfiddle I a continuación). He leído que, dado que los pseudo-elementos no están en el DOM, necesitarías un truco para esto. Lamentablemente, no puedo encontrar un Stackoverflow Q & A que muestre el código de trabajo.

Enlace: 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

Una solución para esto habría que añadir dinámicamente un <span> al elemento y la asignación de un método de clic a ella. 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

Sé que está intentando utilizar: antes, pero para esta situación, no puedes crear un nuevo div con una clase para usar como un gancho y anexarlo al div original?

Algo como esto podría funcionar:

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

Y el 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

Si sabe donde el círculo "debería" ser, puede utilizar la trigonometría para ver si el clic se encuentra dentro del círculo: 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'); 
});​