web-dev-qa-db-fra.com

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

J'ai un élément div avec un pseudo-élément CSS ::before utilisé comme bouton de fermeture (au lieu d'utiliser un bouton réel). Comment appliquer un écouteur d'événements au uniquement au 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;
}
javascriptcsspseudo-element
34
jenswirf

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

34
Quentin

Je cherchais une solution et j'ai trouvé ce fil. Je veux 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 pas besoin d'événements de pointeur sur element. Vérifiez-le action .

29
p.boiko

Il n'y a pas de sélecteur: avant et: après dans jQuery. Cependant, vous pouvez également vérifier l'emplacement de l'événement click 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>
12
Benjamin Intal

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

C'est pervers, mais possible.

2
Yuri Sulyma

De manière générale non comme indiqué par les autres. Mais dans le cas où votre balise avec pseudo-élément est vide , comme glyphicon dans le bootstrap .

Vous pouvez envelopper un div ou span ou n'importe quelle 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 intercepté.

Exemple:

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

Supposons que vous souhaitiez ajouter un événement au glyphicon ci-dessus, vous pouvez utiliser jquery parent selector

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

Juste une petite astuce au cas où votre tag serait vide .

0
gongzhitaao