jquery stop enfant déclenchant l'événement parent

J'ai une div à laquelle j'ai attaché un onclickévénement. dans cette div, il y a une balise avec un lien. Lorsque je clique sur le lien, l' onclickévénement du div est également déclenché. Comment puis-je désactiver cela afin que si le lien est cliqué sur le div onclickne soit pas tiré?

scénario:

$(document).ready(function(){
    $(".header").bind("click", function(){
         $(this).children(".children").toggle();
    });
})

Code HTML:

<div class="header">
    <a href="link.html">some link</a>
    <ul class="children">
        <li>some list</li>
    </ul>
</div>

Faites ceci:

$(document).ready(function(){
    $(".header").click(function(){
        $(this).children(".children").toggle();
    });
   $(".header a").click(function(e) {
        e.stopPropagation();
   });
});

Si vous souhaitez en savoir plus sur .stopPropagation (), regardez ici .

Ou, plutôt que d'avoir un gestionnaire d'événements supplémentaire pour empêcher un autre gestionnaire, vous pouvez utiliser l' argument Objet d'événement transmis à votre gestionnaire d'événements click pour déterminer si un enfant a été cliqué. targetsera l'élément cliqué et currentTargetsera le div .header:

$(".header").click(function(e){
     //Do nothing if .header was not directly clicked
     if(e.target !== e.currentTarget) return;

     $(this).children(".children").toggle();
});

Meilleur moyen en utilisant on () avec un chaînage comme,

$(document).ready(function(){
    $(".header").on('click',function(){
        $(this).children(".children").toggle();
    }).on('click','a',function(e) {
        e.stopPropagation();
   });
});

Les réponses ici ont pris la question du PO trop littéralement. Comment ces réponses peuvent-elles être développées dans un scénario où il y a BEAUCOUP d'éléments enfants, pas seulement une seule <a>balise? Voici une façon.

Disons que vous avez une galerie de photos avec un arrière-plan noirci et les photos centrées dans le navigateur. Lorsque vous cliquez sur l'arrière-plan noir (mais pas sur rien à l'intérieur), vous souhaitez que la superposition se ferme.

Voici quelques HTML possibles:

<div class="gallery" style="background: black">
    <div class="contents"> <!-- Let's say this div is 50% wide and centered -->
        <h1>Awesome Photos</h1>
        <img src="img1.jpg"><br>
        <img src="img2.jpg"><br>
        <img src="img3.jpg"><br>
        <img src="img4.jpg"><br>
        <img src="img5.jpg">
    </div>
</div>

Et voici comment le JavaScript fonctionnerait:

$('.gallery').click(
    function()
    {
        $(this).hide();
    }
);

$('.gallery > .contents').click(
    function(e) {
        e.stopPropagation();
    }
);

Cela arrêtera les événements de clic des éléments à l'intérieur .contentsde chaque recherche .galleryafin que la galerie se ferme uniquement lorsque vous cliquez dans la zone d'arrière-plan noir délavé, mais pas lorsque vous cliquez dans la zone de contenu. Cela peut être appliqué à de nombreux scénarios différents.

Je suis tombé sur cette question, à la recherche d'une autre réponse.

Je voulais empêcher tous les enfants de déclencher le parent.

JavaScript:

document.getElementById("parent").addEventListener("click",  function (e) {
    if (this !== event.target) return;
    // Do something
});

jQuery:

$("#parent").click(function () {
    // Do something
}).children().on("click", function (e) {
    e.stopPropagation();
});

Ou ca:

$(document).ready(function(){
    $(".header").click(function(){
        $(this).children(".children").toggle();
    });
   $(".header a").click(function(e) {
        return false;
   });
});

La solution la plus simple consiste à ajouter ce CSS aux enfants:

.your-child {
    pointer-events: none;
}

Un moyen plus court de le faire:

$('.header').on('click', function () {
    $(this).children('a').on('click', function(e) {
        e.stopPropagation();
        $(this).siblings('.children').toggle();
    });
});