jQuery选择：选择框

Question

让我们说，我有以下代码内框，但不是一个元素：

<div class="body"> 
    Click me and it will work. 
    <div class="head">Click me and nothing will happen.</div> 
</div> 

我想显示“它的工作原理”当您单击.body股利而不是里面里面.head div。我怎样才能做到这一点？

有了这个代码，日志显示，即使你点击head：

<script> 
$('.body').click(function(){console.log('it works !');}); 
</script> 

Answer 1

事件冒泡是造成你的烦恼。从本质上讲，你的'头'类的事件处理程序将捕获点击，然后将该事件通知给你的'body'处理程序，因为它们是嵌套的。

Here is an excellent primer on event bubbling, how it works, and how to control event bubbling.

这里工作jsFiddle example为您测试。

Answer 2

$('.body').click(function(e){ 

if($(e.target).hasClass('body')) 
    console.log('it works !'); 

}); 

Answer 3

其所谓的事件冒泡。当你点击“head”div时，你也可以点击“body”div。

您需要添加：

$('.head').click(function(event){event.stopPropagation()}); 

，以防止事件冒泡。

Answer 4

这是一般的解决办法：在计算器

$('.body').click(function(e){ 
    if(e.target === this) { 
     console.log('it works !'); 
    } 
}); 

解决类似的问题： Select only parent, exclude everything else while click()