Maison >interface Web >js tutoriel >Comment empêcher les clics d'ancrage enfant de déclencher des événements de clic parent ?

Comment empêcher les clics d'ancrage enfant de déclencher des événements de clic parent ?

Linda Hamilton
Linda Hamiltonoriginal
2024-12-14 18:39:09697parcourir

How to Prevent Child Anchor Clicks from Triggering Parent Click Events?

Empêcher les événements de clic d'ancrage enfant de déclencher un événement de clic parent

Comme le montre votre code, lorsqu'un élément d'ancrage enfant est cliqué dans un div parent avec un événement onclick, les deux événements se déclenchent. Pour résoudre ce problème et empêcher l'exécution de l'événement de clic parent, vous disposez de deux options :

Option 1 : Vérifier l'origine de l'événement

En examinant l'objet eventargs transmis par jQuery , vous pouvez déterminer l'élément qui a initié le clic :

$("#clickable").click(function(e) {
    if($(e.target).is("div")) {
        window.location = url;
        return true;
    }
});

Si l'élément expéditeur n'est pas le div lui-même, le div Le gestionnaire onclick ne sera pas déclenché.

Option 2 : arrêter le bouillonnement de l'événement

Vous pouvez également empêcher l'événement de clic de remonter jusqu'au parent en utilisant stopPropagation( ) sur l'ancre enfant :

$("#clickable a").click(function(e) {
    // Custom anchor handler
    e.stopPropagation();
});

Cette méthode empêche la propagation de l'événement au div parent, garantissant ainsi que seul l'événement de clic d'ancrage se déclenche.

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!

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