stopPropagation 中断事件处理程序

Question

在 javascript 中使用 stopPropagation 时，我有点头疼。根据many different sources 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?

});

还有一个Fiddle。

Answer 1

您发送myEvent，最终您调用.stopPropagation()。此后的每次点击都使用已停止传播的 myEvent 的同一实例。

如果您希望能够多次点击，您需要在发送它之前make a copy of the event。

...或者你可以像这样重写你的 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