Maison >interface Web >js tutoriel >Comment empêcher l'exécution des gestionnaires d'événements parents lorsqu'un événement enfant est déclenché dans des objets DOM imbriqués ?

Comment empêcher l'exécution des gestionnaires d'événements parents lorsqu'un événement enfant est déclenché dans des objets DOM imbriqués ?

Susan Sarandonoriginal: 2024-11-24 08:45:11318parcourir

How to Prevent Parent Event Handlers from Executing When a Child Event is Triggered in Nested DOM Objects?

Maintenir la progression des événements dans les objets DOM imbriqués

Dans une structure DOM imbriquée où les gestionnaires d'événements sont définis sur plusieurs niveaux, il est souvent souhaitable d'empêcher l'exécution des gestionnaires d'événements parents lorsqu'un événement enfant est déclenché. Prenons l'exemple suivant :

<div><pre class="brush:php;toolbar:false"><div>

Dans cette structure, un clic sur n'importe quel élément div invoque la fonction "func". Cependant, il y a un problème : un clic sur "b" ou "c" déclenche la fonction "func" à la fois pour le div cliqué et son div parent, "a".

Solution : Contrôle de la propagation des événements

jQuery fournit une méthode pour empêcher la propagation des événements dans l'arborescence DOM. En ajoutant le code suivant avant de définir les gestionnaires d'événements :

$('#a').add('#b').click(function(event) {
    event.stopPropagation();
});

vous pouvez empêcher les clics sur "b" ou "c" de propager l'événement à leur parent, "a". Cela garantit que seule la fonction du div enfant cliqué sera exécutée.

En contrôlant la propagation des événements, vous pouvez maintenir le flux d'événements souhaité dans votre structure DOM imbriquée et empêcher les exécutions involontaires de fonctions.

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!

for Event function dom this issue

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Optimisation des bibliothèques externes avec l'attribut defer : augmentation de la vitesse des pagesArticle suivant：Optimisation des bibliothèques externes avec l'attribut defer : augmentation de la vitesse des pages

Articles Liés

Voir plus