Maison > interface Web > js tutoriel > le corps du texte

Comment empêcher les gestionnaires d'événements parents de s'exécuter avec des clics sur les éléments enfants dans jQuery ?

Barbara Streisand
Libérer: 2024-11-23 22:55:10
original
678 Les gens l'ont consulté

How to Prevent Parent Event Handlers from Executing with Child Element Clicks in jQuery?

Empêcher l'exécution des gestionnaires d'événements parents

Dans la structure HTML donnée, cliquer sur n'importe quel élément div déclenche le gestionnaire de clic de son div parent, conduisant à un comportement involontaire. Pour éviter cela, nous pouvons désactiver la propagation des événements de clic à l'aide de jQuery.

<div>
Copier après la connexion
function func() {
   if ($(childId).hasClass("visible")){
    $(childId).removeClass("visible");
    $(childId).addClass("invisible");
}
Copier après la connexion

Pour désactiver la propagation des événements de clic, ajoutez un gestionnaire d'événements aux éléments enfants qui appelle la méthode stopPropagation() :

function handler(event) {
    event.stopPropagation();
    // Custom code to execute for the child's click event
}

$('#a').add('#b').click(handler);
Copier après la connexion

En empêchant la propagation des événements, les clics sur les éléments enfants (« #b ») ne déclencheront plus le gestionnaire de clics de l'élément parent (« #a »). De même, les clics sur les éléments descendants (« #c ») ne se propageront pas aux deux éléments parents (« #b » et « #a »).

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal