Como ter clique em evento APENAS acionar pai DIV, não filhos?

Eu tenho um DIV com um foobar classificado, e alguns DIVs dentro do DIV que são unclassd, mas suponho que eles estão herdando a class foobar :

 $('.foobar').on('click', function() { /*...do stuff...*/ }); 

Eu quero que triggersr apenas quando clicar em algum lugar no DIV, mas não em seus filhos DIVs.

Se o e.target é o mesmo elemento, você não clicou em um descendente.

 $('.foobar').on('click', function(e) { if (e.target !== this) return; alert( 'clicked the foobar' ); }); 
 .foobar { padding: 20px; background: yellow; } span { background: blue; color: white; padding: 8px; } 
  
.foobar (alert) child (no alert)

Há outra maneira de funcionar se você não se importar em segmentar apenas navegadores mais recentes. Basta adicionar o CSS

 pointer-events: none; 

para qualquer criança do div que você deseja capturar o clique. Aqui estão as tabelas de suporte

http://caniuse.com/#feat=pointer-events

Você pode usar borbulhando a seu favor:

 $('.foobar').on('click', function(e) { // do your thing. }).on('click', 'div', function(e) { // clicked on descendant div e.stopPropagation(); }); 
 //bind `click` event handler to the `.foobar` element(s) to do work, //then find the children of all the `.foobar` element(s) //and bind a `click` event handler to them that stops the propagation of the event $('.foobar').on('click', function () { ... }).children().on('click', function (event) { event.stopPropagation(); //you can also use `return false;` which is the same as `event.preventDefault()` and `event.stopPropagation()` all in one (in a jQuery event handler) }); 

Isso interromperá a propagação (bubbling) do evento click em qualquer elemento (s) filho (s) do (s) elemento (s) .foobar para que o evento não alcance o (s) elemento (s) .foobar para triggersr seu manipulador de evento (s) ).

Aqui está uma demonstração: http://jsfiddle.net/bQQJP/

 $(".advanced ul li").live('click',function(e){ if(e.target != this) return; //code // this code will execute only when you click to li and not to a child }) 

Eu tive o mesmo problema e criei essa solução (com base nas outras respostas)

  $( ".newsletter_background" ).click(function(e) { if (e.target == this) { $(".newsletter_background").hide(); } }); 

Basicamente, diz que se o alvo é o div, então execute o código; caso contrário, não faça nada (não o esconda)