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

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

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

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

Answer 1

如果e.target和this元素是相同的，那么你没有点击一个后代。

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

Answer 2

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

 pointer-events: none; 

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

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

Answer 3

你可以使用冒泡的方式：

 $('.foobar').on('click', function(e) { // do your thing. }).on('click', 'div', function(e) { // clicked on descendant div e.stopPropagation(); }); 

Answer 4

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

Answer 5

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