Comment empêcher les événements de clic parent de se déclencher lorsque les ancres enfants sont cliquées ?

Prévenir les événements de clic des parents lorsque des ancres enfants sont cliquées

Lors de l'incorporation d'éléments cliquables dans les éléments parents et leurs enfants, il est courant de rencontrer un scénario dans lequel le parent et l'enfant les événements de clic sont déclenchés simultanément. Ce comportement se produit en raison de la nature bouillonnante des événements dans le DOM.

Pour empêcher l'événement de clic du parent de se déclencher dans de tels cas, plusieurs solutions peuvent être utilisées.

Vérification de l'origine de l'événement

L'utilisation de la propriété e.target dans le gestionnaire d'événements de clic du parent permet d'identifier l'élément réel déclenchant l'événement. En comparant e.target à l'élément parent, il est possible de déterminer si le clic provient du parent ou ailleurs à l'intérieur de celui-ci.

Arrêter la propagation des événements

Vous pouvez également attacher un gestionnaire d'événements de clic à l'élément parent. les ancres enfants et l'appel de e.stopPropagation() à l'intérieur empêchent l'événement de se propager jusqu'au parent. De cette façon, l'événement de clic du parent ne sera pas déclenché lorsque l'on clique sur ses ancres enfants.

Exemple de code :

$("#clickable").click(function(e) {
    if ($(e.target).is("div")) {  // Check if the event originated from the <div>
        window.location = url;
        return true;
    }
});

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

En appliquant l'une de ces méthodes, il devient possible de gérer sélectivement les événements de clic en fonction de l'élément cible, garantissant que l'événement de clic du parent n'est déclenché que lorsqu'il s'agit de la cible prévue.

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!