阻止事件在DOM中冒泡

Question

我正在写一个HTML编辑器，任何人都可以将这个插件插入到他们的站点中并使用它。

插件使用

$(".editable").htmleditor();

单击此元素，我将将元素更改为contenteditable，我的编辑器菜单将在元素附近打开，就像aloha一样。

问题

场景1

<div class='editable' onclick='loadUrl('https://facebook.com')'>
</div>

场景2

<div class='editable' id='openNewWindow'></div>
<script>
    $("#openNewWindow").click(function(e){
        e.preventDefault();
        e.stopPropagation();
    });
</script>

前面提到的场景我不会收到这个事件。这使得我的插件不可靠。我尝试了几种解决方案。

解决方案我试过

1. 删除主体中的所有元素，并再次插入其中以删除附加的事件处理程序。它可以工作，但用户界面是扭曲的，同时插入一些网站。
2. 在所有元素中添加了onclick='return false'属性。它只适用于某些元素。

如何解除所有附加事件处理程序的绑定并防止元素的默认事件？

Answer 1

在场景1中，插件的用户既使元素可编辑，又使单击它可以从当前页面导航。这没什么意义，但这是他们的事。在这种情况下，他们不能现实地期望您的插件运行。

在场景2中，您需要在其他地方处理click事件之前处理它。删除或抑制现有的处理程序不是一个好主意:它可能会使页面的其他部分失败，并且在任何情况下都会使用户感到厌烦。

相反，您可以让处理程序在事件捕获阶段运行，如下所示：

editableElement.addEventLister("click", myHandler, true); // note the "true"

现在，您的处理程序将在使用JQuery添加的所有处理程序之前运行(以及大多数人通过任何方式添加的处理程序)，这些处理程序在事件气泡阶段运行。请注意，这种技术只适用于现代浏览器(即，IE < 9)。

参考：What is event bubbling and capturing?