83

假设你有一些这样的代码：

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

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

更新

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

4

5 回答 5

106

您需要使用event.stopPropagation()

现场演示

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

event.stopPropagation()

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

于 2012-12-20T06:52:54.900 回答
24

没有 jQuery：演示

 <div id="parentDiv" onclick="alert('parentDiv');">
   <div id="childDiv" onclick="alert('childDiv');event.cancelBubble=true;">
     AAA
   </div>   
</div>
于 2012-12-20T06:55:27.630 回答
9

我遇到了同样的问题并通过这种方法解决了。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");
}
于 2015-11-23T12:35:08.043 回答
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();
});​
于 2012-12-20T06:56:53.543 回答
5

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

也是MDN上的一个很好的参考链接

于 2012-12-20T07:00:26.410 回答