Auditeur d'événement sur un pseudo-élément CSS, tel que :: after and :: before?

Non. Le pseudo-élément n'existe pas dans le DOM, donc il n'a pas d'objet HTMLElementNode qui le représente.

Il n'y a pas: avant et: après le sélecteur en jQuery. Cependant, en variante, vous pouvez vérifier l'emplacement de l'événement de clic et vérifier s'il se trouve sur votre pseudo-élément:

(Je n'ai pas testé cela)

style:

 #mything { width: 100px; height: 100px; position: relative; background: blue; } #mything:after { content: "x"; font-size: 10px; position: absolute; top: 0; right: 0; background: red; width: 10px; height: 10px; } 

Javascript:

 $('#mything').click(function(e) { if (e.clientX > $(this).offset().left + 90 && e.clientY < $(this).offset().top + 10) { // do something } }); 

Html:

 <div id="mything">Foo</div> 

Si la position et les dimensions du contenu généré sont connues, vous pouvez ajouter un gestionnaire de clics sur l'élément lui-même et vérifier la position relative de la souris avant de la gérer.

C'est pervers, mais possible.

Procurait une solution et trouvais ce fil. Je souhaite maintenant partager ma solution:

CSS

 element { pointer-events: none; } element::after { pointer-events: all; } 

JS

 element.addEventListener('click', function() { ... }); 

Cela fonctionne si vous n'avez besoin d'aucun événement pointeur sur l' element . Vérifiez-le en action .

D'une manière générale, non comme indiqué par d'autres. Mais dans le cas où votre étiquette avec pseudo-élément est vide , comme glyphicon dans bootstrap .

Vous pouvez envelopper un div ou une span ou n'importe quelle étiquette appropriée dans votre cas. Glyphicons dans bootstrap utilise :before mais sur la page, vous pouvez voir qu'il a un événement survolté.

Exemple:

 <span> <span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span> </span> 

Supposons que vous souhaitez ajouter un événement au glyphicon ci-dessus, vous pouvez utiliser le sélecteur parent jquery

 $('glyphicon').parent('span').click(function() { // awesome things }); 

Juste une petite astuce dans le cas où votre étiquette est vide .