Question

我在masked标记上有一个名为body的自定义类。在页面中间，我有一个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>

Answer 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

当单击内部容器时，外部容器上的jQuery Click Handler会被触发

1 个答案: