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

71

假设您有这样的代码：

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

我不想在parentDiv点击childDiv怎么办？

更新

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

javascript jquery dhtml

— 王乔
source

3

这就是所谓的事件冒泡，好点开始： - stackoverflow.com/questions/4616694/...

— Pranav

2

该问题的标题应为“从触发父单击事件停止子事件单击”，其含义与之相反。

— 伊恩内

92

您需要使用event.stopPropagation（）

现场演示

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

event.stopPropagation（）

描述：防止事件使DOM树冒泡，从而防止任何父处理程序收到该事件的通知。

— 阿迪尔
source

6

如果您有2个单独的处理程序来处理父级和子级click事件，并且只想通过在子级上通过click事件触发子级处理程序，则必须在childDiv而不是parentDiv上调用event.stopPropagation（）

— tsveti_iko

20

没有jQuery：演示

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

— 阿基尔·塞哈兰（Akhil Sekharan）
source

谢谢@Akhil为我工作。

— amol rajput

8

我遇到了同样的问题，并通过这种方法解决了。html：

<div id="parentDiv">
   <div id="childDiv">
     AAA
   </div>
    BBBB
</div>

JS：

$(document).ready(function(){
 $("#parentDiv").click(function(e){
   if(e.target.id=="childDiv"){
     childEvent();
   } else {
     parentEvent();
   }
 });
});

function childEvent(){
    alert("child event");
}

function parentEvent(){
    alert("paren event");
}

— KamuranSönecek
source

6

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

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

句法：

这是使用此方法的简单语法：

event.stopPropagation()

例：

$("div").click(function(event) {
    alert("This is : " + $(this).prop('id'));

    // Comment the following to see the difference
    event.stopPropagation();
});

— 宫殿
source

5

点击事件Bubbles（现在是冒泡的意思），此处是一个不错的起点。event.stopPropagation()如果您不希望该事件进一步传播，则可以使用。

也是参考MDN的好链接

— 普拉纳夫
source