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>

上述情况我不会收到此事件。它使我的插件不可靠。我尝试了几种解决方案。

我尝试的解决方案

删除正文中的所有元素并再次重新插入其中以删除附加的事件处理程序。它可以工作，但在插入某些网站时，UI会失真。
在所有元素中添加了onclick='return false'属性。它仅适用于某些元素。

如何取消绑定所有附加的事件处理程序并阻止元素的默认事件？

Answer 1

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

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

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

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

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

供参考：What is event bubbling and capturing?

停止在DOM中冒泡的事件

1 个答案: