stopPropagation中断事件处理程序

stopPropagation breaks event handler

本文关键字：程序 事件处理 中断 stopPropagation      更新时间：2023-09-26

当谈到在javascript中使用stopPropagation时，我有点挠头。根据许多不同的来源，stopPropagation应该停止向父元素冒泡事件，然而，当我使用它时，它似乎阻止了第一次单击后调用事件。我编写了一段非常简单的代码来重现下面的行为:

HTML: 

<div id="root">
    <div id="top">
         <h1>Click Me!</h1>
    </div>
</div>

js/jQuery: 

var myEvent = document.createEvent("Event");
myEvent.initEvent("boop", true, true);
$("#root").on('boop', function (e) {
    alert("root boop!");
});
$("#top").on('boop', function (e) {
    // After this is called, this event handler will never fire again.
    e.stopPropagation();
    alert("top boop!");
});
$("h1").click(function (e) {
    $("#top").get(0).dispatchEvent(myEvent);
    // I know that $("#top").trigger will prevent the problem, what is wrong with the form above?
});

还有小提琴

调度myEvent，最终调用.stopPropagation()。此后的每次点击都使用停止传播的myEvent实例。

如果你想要能够多次点击，你需要在调度事件之前创建一个副本。

…或者你可以这样重写你的JavaScript:

$("#root").on('boop', function (e) {
  alert("root boop!");
});
$("#top").on('boop', function (e) {
  e.stopPropagation();
  alert("top boop!");
});
$("h1").click(function (e) {
  var myEvent = document.createEvent("Event");
  myEvent.initEvent("boop", true, true);
  $("#top").get(0).dispatchEvent(myEvent);
});

Working JS Fiddle

相关文章：