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 Sarandon

Libérer： 2024-11-24 08:45:11

original

294 Les gens l'ont consulté

<div><div class="code" style="position:relative; padding:0px; margin:0px;"><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!