Comment détecter les événements de clic sur des pseudo-éléments ?

Détecter uniquement l'événement de clic sur le pseudo-élément

Il est courant d'utiliser des pseudo-éléments pour styliser les éléments sans affecter la structure DOM. Cependant, un défi courant se pose lorsque nous souhaitons attacher des gestionnaires d'événements à ces pseudo-éléments.

Le problème :

L'extrait de code fourni démontre un problème où un clic L'événement est déclenché à la fois sur l'élément parent (bit bleu) et sur le pseudo-élément (bit rouge) lorsque l'on clique sur l'élément parent. Le but est de détecter l'événement clic uniquement sur le pseudo-élément.

La solution :

Malheureusement, il n'est pas possible d'attacher des gestionnaires d'événements directement au pseudo-élément. éléments car ils ne font pas partie du DOM. Cependant, il existe une solution de contournement :

1. Créer un élément enfant : Au lieu d'utiliser le pseudo-élément, créez un élément enfant (par exemple, un span).
2. Placer l'élément enfant : Placez l'élément enfant immédiatement après l'ouverture

   tag.

3. Appliquer les styles à l'élément enfant : Appliquez les styles souhaités à l'élément enfant au lieu du pseudo-élément.
4. Attachez le gestionnaire d'événements : Liez le gestionnaire d'événements (par exemple, cliquez) à l'élément enfant.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!