jquery parar filho provocando evento pai

Eu tenho um div que eu tenho anexado um evento onclick para. neste div existe uma tag com um link. Quando clico no link, o evento onclick do div também é acionado. Como posso desabilitar isso para que, se o link for clicado no div onclick não seja triggersdo?

roteiro:

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

Código HTML:

 
some link
  • some list

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 (), veja aqui .

Ou, em vez de ter um manipulador de events extra para impedir outro manipulador, você pode usar o argumento de object de evento passado ao manipulador de events de clique para determinar se uma criança foi clicada. target será o elemento clicado e currentTarget será o .header div:

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

Melhor maneira de usar 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 a ser muito literal. Como essas respostas podem ser expandidas em um cenário onde existem MUITOS elementos filho, não apenas uma única tag ? Aqui está um caminho.

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

Aqui está um possível HTML:

  

E aqui está como o JavaScript funcionaria:

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

Isso interromperá os events de clique dos elementos dentro de .contents de todas as pesquisas .gallery portanto, a galeria será fechada somente 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 tropecei nessa questão, procurando outra resposta.

Eu queria impedir que todas as crianças ativassem o pai.

Este é o método mais fácil e mais legível para isso:

 $(".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; }); }); 

Um jeito mais curto de fazer isso:

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

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

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