Ist es möglich, einen Klick von einem: after oder: before Pseudoelement mit jQuery zu erkennen?

Question

Lets sagen, ich habe:

<div></div> 

mit:

div { 
    width: 500px; 
    height: 500px; 
    position: relative; 
} 
div:after { 
    content: ''; 
    display: block; 
    width: 20px; 
    height: 20px; 
    position: absolute; 
    top: 0; 
    right: 0; 
} 

Kann ich etwas tun, wie $('div:after').click(function(){...});? Und habe es nicht Feuer, wenn ich auf div aber nicht div:after klicke.

Answer 1

Vielleicht. Je nachdem, wie Sie Ihren Pseudoinhalt strukturieren, müssen Sie sich darauf verlassen, dass Sie die Mausposition für Klicks auf das tatsächliche div berechnen. Die Event-Handler würden alle auf das div und nicht auf das Pseudo-Element gehen, weil es nicht im DOM existiert.

Weitere Informationen finden Sie unter Manipulating CSS :before and :after pseudo-elements using jQuery . Vor allem BoltClocks Antwort.

Siehe auch Felix Kommentar für eine andere mögliche Lösung ohne Positions Maus: Only detect click event on pseudo-element