当内部容器也被点击时，外部容器上的 jQuery 点击处理程序会被触发答案

【问题标题】：jQuery Click Handler on Outer Container Gets Fired When Inner Container is Clicked Too当内部容器也被点击时，外部容器上的 jQuery 点击处理程序会被触发
【发布时间】：2013-01-05 16:32:03
【问题描述】：

我在body 标记上有一个名为masked 的自定义类。在页面中间，我有一个DIV，大约是页面宽度和高度的 50%。

我试图仅将点击处理程序附加到 body.masked 选择器，但问题是每当点击内部 DIV 时，该 body.masked 选择器上的点击处理程序也会被触发。

好像中间的DIV是“透明的”。我该如何避免呢？

这里有一些代码：

$('body.masked').click(function(){
  alert();
})

还有 HTML：

<body class="masked">
  <div style="width:50%;height:50%;text-align:center;>Lorem ipsum</div>
</div>

【问题讨论】：

标签： jquery onclick

【解决方案1】：

因为event bubbling。

它使子元素中发生的事件冒泡到事件树的顶部。这就是它发生的原因。

在事件处理程序中，您可以检查 e.target 值以检查事件发生的位置。

例如：

$('.top').on('click', function(e){
    console.log(e, e.currentTarget, e.target, this);
    if($(e.target).is(this)){
        console.log('proceed')
    }
})

Fiddle

【讨论】：

另外，对于未来的读者，这个答案可能会有所帮助：stackoverflow.com/questions/11545518/…