Question

嗨，以下是我的HTML。

// consider all are of same size
<div id="grand-parent">
   <div id="parent">
      <div id = "child">
      </div>
   </div>
</div>

的Javascript。

$("#grand-parent").click(function(){
    alert("grand-parent");
});

$("#parent").click(function(){
    alert("grand-parent");
});

 // consider this as child event but actual child event comes from third party.
$("#parent").click(function(){
   return false;
});

事件按子，父，祖父的顺序绑定。现在当我点击div子元素事件时会先触发返回false。这将阻止事件冒泡。但我希望也需要触发grand-parent div click事件。

拦截器：子点击事件将始终首先绑定，它是第三方API，因此我们无法触摸。

任何帮助都可以表示赞赏。

Answer 1

你可以使用下面的代码，如果你点击孩子然后第一个祖父母将触发，然后是孩子，然后是父母。如果单击parent，则会触发grand parent事件，然后是parent，如果单击grand parent，它将仅触发grand parent。在这段代码中，我正在应用事件捕获概念，因此祖父将首先调用，然后控制转到子，然后是父。

JS小提琴链接 -

https://jsfiddle.net/oe1qxsub/

HTML -

<div id="grand-parent">
<div id="parent">
  <div id = "child">
  </div>
</div>
</div>

JS -

$("#grand-parent").get(0).addEventListener("click", function(){
 alert("grand-parent");
}, true);



$("#parent").click(function(){
 alert("parent");
});


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

CSS -

#grand-parent{
 background:blue;
 width:80px;
 height:80px;
}
#parent{
 background:red;
 width:50px;
 height:30px;
}
#child{
 background:yellow;
 width:20px;
 height:20px;
}

Answer 2

解决方案是在祖父母注册时使用useCapture addEventListener参数。

这将在调用孩子的事件之前调用grand-parent事件。

请参阅the doc for addEventListener。

如何在返回false时启用事件冒泡？

2 个答案: