jQuery点击内容器点击时点击外部容器上的Handler

我在body标记上有一个名为masked的自定义类。在页面中间，我有一个DIV，页面的宽度和高度约为50％。jQuery点击内容器点击时点击外部容器上的Handler

我试图点击处理程序附加仅对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>

来源

2013-01-22 hasMobi - Android Apps

正是因为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

来源

2013-01-22 12:34:24

另外，对于未来的读者，这个答案可能会有所帮助：http://stackoverflow.com/questions/11545518/hide-a-div-when -clicked-外的-它？RQ = 1 –

jQuery点击内容器点击时点击外部容器上的Handler

回答

相关问题