Question

假设你有这样的代码：

<html>
<head>
</head>
<body>
   <div id="parentDiv" onclick="alert('parentDiv');">
       <div id="childDiv" onclick="alert('childDiv');">
       </div>   
    </div>
</body>
</html>

点击parentDiv时，我不想触发childDiv点击事件，我该怎么做？

更新

此外，这两个事件的执行顺序是什么？

Answer 1

您需要使用event.stopPropagation()

<强> Live Demo

$('#childDiv').click(function(event){
    event.stopPropagation();
    alert(event.target.id);
});

event.stopPropagation()

描述：防止事件冒泡DOM树，防止任何父处理程序被通知事件。

Answer 2

没有jQuery： DEMO

 <div id="parentDiv" onclick="alert('parentDiv');">
   <div id="childDiv" onclick="alert('childDiv');event.cancelBubble=true;">
     AAA
   </div>   
</div>

Answer 3

stopPropagation()方法停止将事件冒泡到父元素，从而阻止任何父处理程序收到事件通知。

您可以使用方法event.isPropagationStopped()来了解是否曾调用此方法（在该事件对象上）。

<强>语法：

以下是使用此方法的简单语法：

event.stopPropagation()

示例：

$("div").click(function(event) { alert("This is : " + $(this).prop('id')); // Comment the following to see the difference event.stopPropagation(); });

Answer 4

点击事件Bubbles ，现在是冒泡的意思，开始的好点是here。如果您不希望该事件进一步传播，则可以使用event.stopPropagation()。

也是参考MDN

的好链接

子元素单击事件触发父单击事件

4 个答案: