Comment puis-je empêcher le déclenchement des événements de clic parent lorsque l'on clique sur des éléments enfants ?

Comprendre le bouillonnement d'événements dans les événements de clic imbriqués

Lorsque vous cliquez sur un élément au sein d'un élément parent qui a tous deux des écouteurs d'événements de clic, les deux événements peuvent être déclenchés. Ce comportement, connu sous le nom de bouillonnement d'événement, peut conduire à des résultats indésirables lorsque vous ne souhaitez pas que l'événement de l'élément parent se déclenche simultanément.

Dans votre scénario spécifique, vous rencontrez ce problème avec un div cliquable contenant une ancre balises. Pour le résoudre, explorons deux approches :

1. Identification cible de l'événement d'origine

Pour empêcher l'événement click du div parent de se déclencher lorsqu'un clic sur une ancre est cliqué, vérifiez l'origine de l'événement lui-même. jQuery fournit une propriété e.target dans les arguments d'événement transmis aux gestionnaires d'événements.

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

Dans cette approche, vous vérifiez si l'événement provient de l'élément div en fonction de son sélecteur. Si ce n'est pas le div, l'événement de changement window.location n'est pas déclenché.

2. Arrêt de la propagation de l'événement

Vous pouvez également empêcher la propagation de l'événement de clic pour les ancres à l'aide de la méthode e.stopPropagation() dans leur gestionnaire d'événements de clic :

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

Avec cette approche, le L'événement click de l'ancre exécute sa propre logique sans propager l'événement à ses éléments parents, empêchant ainsi le déclenchement de l'événement click du div.

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!