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

Cliquez sur Détection d'événements sur les pseudo-éléments

Question :

Dans le code fourni, un événement click est déclenché à la fois sur le pseudo-élément (bit rouge) et sur l'élément principal (bit bleu). Cependant, le but est de détecter les clics uniquement sur le pseudo-élément. Est-ce possible ?

Réponse :

Non, il n'est pas possible de détecter directement les événements de clic sur les pseudo-éléments car ils n'existent pas dans le cadre de l'objet Document. Modèle (DOM). Les pseudo-éléments sont des éléments virtuels générés par le navigateur et ne font pas partie de la structure HTML réelle.

Approche alternative :

Si vous devez implémenter un clic gestionnaire spécifiquement pour la région rouge, vous pouvez créer un élément enfant, tel qu'un span :

<p>
  <span class="red-bit"></span>
  Lorem ipsum dolor sit amet, ...
</p>

Ensuite, appliquez des styles au span element :

.red-bit {
  position: absolute;
  left: 100%;
  width: 10px;
  height: 100%;
  background-color: red;
}

Enfin, liez le gestionnaire de clics à l'élément span :

document.querySelector(".red-bit").addEventListener("click", function() {
  // Click handler code
});

Cette approche vous permet de capturer les clics sur la région rouge tout en empêchant les clics d'être déclenchés sur la élément principal.

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!