Comment puis-je détecter les événements de clic sur les pseudo-éléments CSS ?

Détection d'événement de clic sur les pseudo-éléments

Les pseudo-éléments, comme :before et :after, améliorent les capacités de style des éléments HTML en insérer du contenu virtuel. Cependant, ces éléments virtuels ne font pas partie du DOM et manquent de capacités de gestion directe des événements.

Dans l'exemple donné, détecter l'événement click uniquement sur le pseudo-élément rouge (créé à l'aide de p:before) est problématique. Les pseudo-éléments ne étant pas représentés dans le DOM, vous ne pouvez pas leur lier directement des événements de clic.

Solution :

Pour obtenir le comportement souhaité, pensez à utiliser un enfant élément au lieu d’un pseudo-élément. Créer un et positionnez-le immédiatement après l'ouverture

étiqueter. Appliquez les styles actuellement appliqués à p:before à ce élément à la place.

<p>
  <span></span>Lorem ipsum dolor sit amet...
</p>

p span {
  content: '';
  position: absolute;
  left:100%;
  width: 10px;
  height: 100%;
  background-color: red;
}

Vous pouvez désormais lier l'événement click à l'élément élément et gérer l'événement en conséquence.

Remarque :

La liaison d'événements à des éléments enfants au sein de pseudo-éléments n'est pas prise en charge de manière cohérente dans tous les navigateurs. Pour une compatibilité optimale entre navigateurs, envisagez d'utiliser l'approche ci-dessus au lieu de vous fier à des pseudo-éléments pour la gestion des événements.

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!