Question

请考虑以下代码：

<div id="outer">
    <div id="inner"></div>
</div>

$('#outer').click(function() { alert ("outer"); });
$('#inner').click(function() { alert ("inner"); });

内部确实被调用，但另一个也被调用。我想做一个或两个情况。你能建议一个更好的方法来解决这个问题，这样我就可以成功点击我的内部div而不会触发我的外部div点击事件吗？

实例：http://jsfiddle.net/Squ9m/

Answer 1

使用event.stopPropagation()：

$('#outer').click(function() { alert ("outer"); });
$('#inner').click(function(event) { event.stopPropagation(); alert ("inner"); });

JS Fiddle demo

您也可以使用return false：

$('#outer').click(function() { alert("outer"); });
$('#inner').click(function(event) { alert("inner"); return false; });

JS Fiddle demo

return false;相当于使用event.stopPropagation()和event.preventDefault();第一个例子很有用，那么，如果你想保留被点击的元素的默认函数，而不允许该事件冒泡DOM树。

参考文献：

Answer 2

您需要将事件传递给触发内部div的方法，然后告诉它停止传播。

$('#inner').click(function(event) { alert("inner"); event.stopPropagation();});

Working Example

当一个包含在另一个中时，将两个div绑定到两个单击事件

2 个答案: