Wie kann Click Event NUR auf Eltern DIV ausgetriggers werden, nicht auf Kinder?

Ich habe ein DIV mit einem klassifizierten foobar und ein paar DIVs innerhalb dieses DIV, die nicht klassifiziert sind, aber ich vermute, dass sie die foobar class erben:

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

Ich möchte das nur abfeuern, wenn ich irgendwo im DIV klicke, aber nicht auf seine Kinder DIVs.

   

Wenn das Element e.target dasselbe Element ist, haben Sie nicht auf einen Nachkommen geklickt.

 $('.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)

Es gibt einen anderen Weg, der funktioniert, wenn es Ihnen nichts ausmacht, nur auf neuere Browser zu zielen. Fügen Sie einfach das CSS hinzu

 pointer-events: none; 

an alle Kinder des div, die Sie den Klick erfassen möchten. Hier sind die Support-Tabellen

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

Sie können zu Ihren Gunsten sprudeln:

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

Dadurch wird die .foobar (Bubbling) des click .foobar auf einem der .foobar Elemente des .foobar -Elements (s) .foobar sodass das Ereignis nicht die .foobar -Elemente erreicht, die den Ereignishandler .foobar (s ).

Hier ist eine Demo: 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 }) 

Ich hatte das gleiche Problem und kam zu dieser Lösung (basierend auf den anderen Antworten)

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

Im Grunde sagt es, wenn das Ziel das Div ist, dann führe den Code aus ansonsten tue nichts (verberge es nicht)