Comment empêcher les événements de clic parent de se déclencher lorsqu'un clic sur une ancre enfant est effectué ?

Empêcher le déclenchement d'événements parents à partir de clics d'ancre enfant

Dans la programmation Web, il est souvent nécessaire d'avoir des éléments cliquables imbriqués dans d'autres éléments cliquables. Cependant, lorsqu'un élément d'ancrage (une balise « a ») est cliqué dans un élément parent cliquable, les deux événements de clic peuvent se déclencher, provoquant un comportement indésirable.

Définition du problème :

L'objectif est d'empêcher l'événement onclick de l'élément parent de se déclencher lorsqu'un enfant d'ancrage est cliqué. Cela garantit que seule l'action prévue de l'ancre a lieu.

Solution 1 : Vérification de l'origine de l'événement

jQuery fournit un objet « eventargs » qui contient des informations sur l'origine de l'événement. En vérifiant les eventargs dans le gestionnaire onclick de l'élément parent, nous pouvons déterminer si le clic provient de l'ancre :

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

Dans ce code, nous vérifions si la cible de l'événement est l'élément 'div'. Si tel est le cas, nous déclenchons l'action du parent (redirection vers une URL spécifique).

Solution 2 : Arrêter le bouillonnement d'événement

Le bouillonnement d'événement fait référence à la propagation d'un événement à travers l'arborescence DOM. En ajoutant un gestionnaire de clics à l'ancre et en appelant « e.stopPropagation() » à l'intérieur, nous pouvons empêcher l'événement de se propager jusqu'à l'élément parent :

$("#clickable a").click(function(e) {
   // Do something
   e.stopPropagation();
});

Cette approche empêche immédiatement l'événement de continuer. son parcours ascendant dans les DOM, en garantissant que seule l'action de l'ancre est exécutée.

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!