Comment empêcher l'événement de clic d'un élément enfant de déclencher l'événement en double clic de l'élément parent?

Évitez intelligemment les conflits entre les clics des éléments enfants et les événements de double-clic de l'élément parent

Dans le développement frontal, l'événement de clic de l'élément enfant et de l'élément enfant et l'élément de double clic est souvent un casse-tête. Surtout lorsque vous cliquez rapidement sur un élément enfant, il est facile de déclencher accidentellement l'événement à double clic de l'élément parent. Cet article fournit deux méthodes pour résoudre efficacement ce problème.

Supposons que la structure HTML est la suivante:

<div>
    <div></div>
</div>

Et la fonction de gestion des événements correspondante:

 showPreset (événement) {
    console.log ('aaaaa');
}

ChangefullScreen () {
    console.log ('bbbb');
}

Un event.stopPropagation() ou return false ne résout pas ce problème car l'événement cliquez et double-cliquez sur l'événement sont différents types d'événements.

Méthode 1: Ajoutez un événement vide à double clic sur l'élément enfant

Lisez un gestionnaire d'événements à double clic vide sur l'élément enfant pour empêcher l'événement à double clic de Bubbled:

 rienfn () {}; // Fonction vide, pas d'opérations // ... Autre code ...

Bind nothingFn à l'événement à double clic de l'élément enfant pour empêcher l'événement à double changeFullScreen

Méthode 2: jugement basé sur l'élément cible de l'événement

Utilisez le mécanisme de bulle d'événements pour déterminer la source de déclenchement de l'événement à double clic en vérifiant event.target . S'il s'agit d'un élément parent, changeFullScreen est exécuté; S'il s'agit d'un élément enfant, il est ignoré. Cette méthode nécessite de modifier la logique de traitement de l'événement à double clic pour lui permettre de distinguer la source de l'événement.

Grâce aux deux méthodes ci-dessus, l'événement de clic de l'élément enfant peut être effectivement empêché de déclencher l'événement à double clic de l'élément parent, évitant ainsi les conflits d'événements. La méthode à choisir dépend des exigences spécifiques du projet et de la structure du code.

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!