Pouvez-vous vraiment détecter les événements de clic sur les pseudo-éléments CSS ?

Détection des événements de clic sur des pseudo-éléments : un mythe démystifié

Malgré l'attrait de manipuler des éléments avec des techniques de style avancées, les pseudo-éléments comme les omniprésents :before et :after restent insaisissables lorsqu'il s'agit de détection d'événements. Comme les développeurs chevronnés le savent, les mécanismes de bouillonnement et de capture d'événements du navigateur contournent entièrement les pseudo-éléments.

Comme le démontre l'extrait de code fourni, un événement de clic lié à l'élément parent, dans ce cas un paragraphe, sera déclenché. quel que soit l'endroit où le clic se produit dans l'élément. Cela inclut à la fois le fond bleu et le pseudo-élément rouge.

La raison de ce comportement de propagation d'événements réside dans la nature inhérente des pseudo-éléments. Ce ne sont pas de véritables éléments DOM mais plutôt un moyen d'augmenter la présentation des éléments existants. En conséquence, ils n'ont pas la capacité de recevoir des événements directs.

Si vous désirez pouvoir gérer les clics exclusivement sur un pseudo-élément, vous devez envisager une approche différente. Une solution consiste à créer un élément enfant, tel qu'un span, imbriqué dans le parent et positionné visuellement pour correspondre au pseudo-élément. En stylisant l'élément enfant au lieu du pseudo-élément et en lui associant un écouteur d'événement, vous pouvez efficacement capturer les clics uniquement sur la zone d'intérêt.

Bien que cette solution de contournement ne reproduise pas parfaitement la simplicité de la détection directe des clics. sur un pseudo-élément, cela reste la solution la plus viable pour atteindre la fonctionnalité souhaitée.

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!