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

Détection des événements de clic sur des pseudo-éléments

En HTML, les pseudo-éléments étendent le style et les capacités visuelles d'un élément sans en être réellement l'arborescence DOM. Cela présente un défi lorsque l'on tente de détecter des événements de clic spécifiquement sur des pseudo-éléments.

Considérez le HTML et le CSS suivants :

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

p {
    position: relative;
    background-color: blue;
}

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

Dans cet exemple, le

L'élément a un pseudo-élément rouge s'étendant au-delà de son bord droit. Le but est de déclencher un événement clic uniquement sur la zone rouge et non sur le rectangle bleu.

Solution

Malheureusement, il n'est pas possible de lier directement des événements à des pseudo -éléments puisqu’ils ne font pas partie de l’arborescence DOM. Un gestionnaire de clics ne peut être lié qu'à ses éléments parents.

Pour obtenir la fonctionnalité souhaitée, une solution de contournement est requise :

• Créez un élément enfant, tel qu'un élément , et placez-le juste après l'ouverture

  tag.

• Appliquez les styles CSS à .p span au lieu de p:before.
• Liez le gestionnaire de clics à l'élément .p span.

Cette approche est essentiellement simule le comportement d'un pseudo-élément tout en permettant la gestion des événements sur la zone d'intérêt spécifique.

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!