📌  相关文章
📜  HTML | DOM stopPropagation() 事件方法(1)

📅  最后修改于: 2023-12-03 15:31:12.542000             🧑  作者: Mango

HTML | DOM stopPropagation() 事件方法

简介

stopPropagation() 方法是 Event 接口的一部分，它可以阻止事件的进一步传播（方向是从子元素到父元素）。

在事件被触发后，事件会从目标元素开始向上冒泡，一直到 window 对象为止。如果在任何节点上调用了 stopPropagation() 方法，则事件将不再传播。

语法
event.stopPropagation();
参数

无。

返回值

无。

示例

HTML 代码：

<body>
  <div id="outer">
    <div id="inner"></div>
  </div>
</body>

JavaScript 代码：

var outer = document.getElementById("outer");
var inner = document.getElementById("inner");
inner.addEventListener("click", function(event) {
  console.log("Inner clicked");
  event.stopPropagation();
});
outer.addEventListener("click", function(event) {
  console.log("Outer clicked");
});

结果： 如果单击 inner 元素，则控制台会显示 “Inner clicked”。 如果单击 outer 元素，则控制台会显示 “Inner clicked” 和 “Outer clicked”。

如果未调用 stopPropagation() 方法，则控制台将显示 “Inner clicked”、“Outer clicked”。 这是因为事件被传递到了 outer 元素。

使用场景

以下是阻止事件传播的常见用例：

点击嵌套的元素时，仅触发内部元素上的事件处理程序

例如，有一个外部 div 和坐落在其中的内部 div。当在内部 div 上点击时，我们希望仅执行内部 div 上的事件处理程序，而不是触发外部 div 上的事件处理程序。

var outer = document.getElementById("outer");
var inner = document.getElementById("inner");
inner.addEventListener("click", function(event) {
  console.log("Inner clicked");
  event.stopPropagation();
});
outer.addEventListener("click", function(event) {
  console.log("Outer clicked");
});
在自定义弹出式菜单中关闭菜单

在自定义弹出式菜单中，菜单可能包含子元素。该菜单应在单击菜单元素外的任意区域时关闭。但是，这意味着我们要为整个文档添加单击事件监听器。

为了避免在单击菜单元素时关闭，我们可以在菜单元素上添加事件侦听器并阻止传播。这将使在菜单元素上点击时不触发文档上的任何单击事件。

var menu = document.getElementById("menu");
document.addEventListener("click", function(event) {
  if (!menu.contains(event.target)) {
    menu.classList.remove("visible");
  }
});
menu.addEventListener("click", function(event) {
  event.stopPropagation();
});

上面代码中，我们为文档添加了单击事件侦听器，以关闭弹出菜单。 然后我们为菜单元素添加了一个单击事件监听器，并在其上调用 stopPropagation() 方法。 这样，当我们在菜单上单击时，单击事件不会触发文档上的单击事件监听器，并且菜单不会被关闭。