javascript - 阻止事件在 DOM 中冒泡

Question

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

插件使用

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

单击此元素，我会将元素更改为可内容编辑，并且我的编辑器菜单将在该元素附近打开，如 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' 属性。它仅适用于某些元素。

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

Answer 1

在场景 1 中，插件的用户既使元素可编辑，又使单击它导航离开当前页面。这没有多大意义，但这是他们的事。在这种情况下，他们实际上无法期望您的插件能够运行。

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

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

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

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

引用:What is event bubbling and capturing?