Un écouteur d'événements sur un pseudo-élément CSS, tel que ::after et ::before ?

Question

J'ai un div avec un pseudo-élément CSS ::before utilisé comme un bouton de fermeture (au lieu d'utiliser un bouton réel). Comment appliquer un écouteur d'événements à uniquement le pseudo-élément ?

HTML

<div id="box"></div>

CSS

#box:before
{
 background-image: url(close.png);
 content: '';
 display: block; 
 height: 20px;
 position: absolute;
 top: -10px;
 right: -10px; 
 width: 20px;
}

#box
{
 height: 100px;
 width: 100px;
}

Answer 1

Je cherchais une solution et j'ai trouvé ce fil de discussion. Je souhaite maintenant partager ma solution de rechange :

CSS

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

JS

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

Ceci fonctionne si vous n'avez pas besoin d'événements de pointeur sur element . Vérifiez-le action .

Answer 2

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

Answer 3

Il n'existe pas de sélecteur :before et :after dans jQuery. Cependant, comme alternative, 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)

le 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>

Answer 4

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 valeur de l'attribut position relative de la souris avant de le manipuler.

C'est pervers, mais possible.

Answer 5

En général, non, comme indiqué par d'autres. Mais dans le cas où votre balise avec pseudo-élément est vide comme glyphicône dans bootstrap .

Vous pouvez envelopper un div o span ou toute autre balise appropriée dans votre cas. Glyphicons dans le bootstrap utilise :before mais sur la page vous pouvez voir qu'il a hover événement capturé.

Exemple :

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

Supposons que vous vouliez ajouter un événement à la glyphique ci-dessus, vous pouvez utiliser Sélecteur de parent jquery

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

Juste un petit truc au cas où votre balise est vide .