Question

鉴于html / css / javascript / jquery如下所示，当我点击'#bbb'时，事件仍会触发。

有没有办法避免这种情况发生？

<div id="aaa" style="position:absolute; width:100%; height:100%; background-color:#f00;">
   <div id="bbb" style="height:25%; width:25%; background-color:#0f0; margin:0 auto;">
   </div>
</div>

<script type="text/javascript">
   $('#aaa').click(function(){alert('aaa clicked');});
</script>

Answer 1

你走了：

$( '#aaa' ).click(function (e) { 
    if ( e.target !== this ) { return; }
    alert( 'aaa clicked' );
});

e.target指向触发click事件的DOM元素。 this指向#aaa元素（因为它是他的点击处理程序）。因此，这一行

if ( e.target !== this ) { return; }

如果未直接点击#aaa元素，

将提前终止点击处理程序。

现场演示： http://jsfiddle.net/qbDZy/

Answer 2

您想要取消事件冒泡（事件传播）
http://www.quirksmode.org/js/events_order.html

DEMO HERE

$('#aaa').click(function(){alert('aaa clicked');});
$('#bbb').click(function(event){alert('bbb clicked');  event.stopPropagation();});

Answer 3

根据我的理解， bbb 元素嵌套在 aaa 元素中，您可能需要处理点击 bbb 元素中的事件。

$('#aaa').click(function(event){event.stopPropagation(); alert('aaa clicked');});
$('#bbb').click(function(event){event.stopPropagation(); alert('bbb clicked');});

但是不要忘记考虑停止事件传播，否则两个事件监听器都会收到通知。

您可以看到source code in action here

希望这有帮助。

在Javascript / DOM中排除元素

3 个答案: