jquery parar filho acionando evento pai

Eu tenho uma div à qual eu anexei um onclickevento. nesta div há uma tag com um link. Quando clico no link, oonclick evento da div também é acionado. Como posso desativar isso para que, se o link for clicado na divonclick não seja acionado?

roteiro:

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

Código HTML:

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

Faça isso:

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

Se você quiser ler mais sobre .stopPropagation (), consulte aqui .

Ou, em vez de ter um manipulador de eventos extra para impedir outro manipulador, você pode usar o argumento Event Object passado para o manipulador de eventos click para determinar se um filho foi clicado. targetserá o elemento clicado e currentTargetserá a div .header:

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

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

Melhor maneira usando on () com encadeamento como,

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

As respostas aqui levaram a pergunta do OP muito literalmente. Como essas respostas podem ser expandidas para um cenário em que há MUITOS elementos filhos, não apenas um<a> tag? Aqui está uma maneira.

Digamos que você tenha uma galeria de fotos com um fundo escuro e as fotos centralizadas no navegador. Ao clicar no plano de fundo preto (mas não em nada dentro dele), você deseja que a sobreposição seja fechada.

Aqui está um possível HTML:

<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>

E aqui está como o JavaScript funcionaria:

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

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

Isso interromperá os eventos de clique dos elementos internos .contentsde todas as pesquisas, .gallerypara que a galeria seja fechada apenas quando você clicar na área de fundo preto desbotada, mas não quando você clicar na área de conteúdo. Isso pode ser aplicado a muitos cenários diferentes.

Eu me deparei com essa pergunta, procurando outra resposta.

Eu queria impedir que todas as crianças acionassem os pais.

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 isto:

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

A solução mais simples é adicionar esse CSS aos filhos:

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

Uma maneira mais curta de fazer isso:

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