Question

我们说我有以下代码：

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

我想在.body div中单击而不是在.head div内部时显示“it works”。我怎么能这样做？

使用此代码，即使您点击head：

，也会显示日志

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

Answer 1

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

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

});

Answer 2

事件冒泡导致您的麻烦。从本质上讲，你的'head'类的事件处理程序会捕获点击，然后将该事件冒泡到你的'body'处理程序，因为它有嵌套。

以下是您要测试的jsFiddle example。

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 !');
    }
});