如何有点击事件只在父DIV,而不是孩子?

我有一个DIV和一个分类的foobar ,DIV里有几个DIV是不加区分的,但是我想他们inheritance了foobar类:

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

我只想在点击DIV中的某个地方而不是在其子DIV上点燃。

如果e.targetthis元素是相同的,那么你没有点击一个后代。

 $('.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; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class='foobar'> .foobar (alert) <span>child (no alert)</span> </div> 

如果你不介意只针对较新的浏览器,还有另一种方法可行。 只需添加CSS

 pointer-events: none; 

给你要捕捉点击的div的任何孩子。 这是支持表

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

你可以使用冒泡的方式:

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

这将停止在.foobar元素的.foobar元素上的click事件的传播(冒泡),因此事件将不会到达.foobar元素来触发它们的事件处理器(s) )。

这里是一个演示: 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 })