在 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?

});

还有一个 Fiddle 。