停止事件以在DOM中弹出

Stopping events to bubble up in DOM

本文关键字：DOM 事件      更新时间：2023-09-26

我正在写一个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'属性。它只适用于某些元素。

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

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

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

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

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

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

供参考：什么是事件冒泡和捕获？

相关文章：