事件：stopImmediatePropagation() 方法

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

注意：此功能在 Web Workers 中可用。

stopImmediatePropagation() 方法是 Event 接口的一部分，它可阻止对同一事件的其它监听器被调用。

如果为同一事件类型向同一元素附加了多个监听器，则它们会按照添加的顺序被调用。如果在调用过程中调用了 stopImmediatePropagation()，则不会再调用该元素上或任何其它元素上的任何剩余监听器。

示例

比较事件停止函数

下面的示例中有三个嵌套 div 中的三个按钮。每个按钮都为 click 事件注册了三个事件监听器，每个 div 也注册了一个 click 事件监听器。

顶部的按钮允许正常的事件冒泡。
中间的按钮在其第一个事件处理程序中调用了 stopPropagation()。
底部的按钮在其第一个事件处理程序中调用了 stopImmediatePropagation()。

HTML

html

<h2>Click on the buttons</h2>
<div>
  outer div<br />
  <div>
    middle div<br />
    <div>
      inner div<br />
      <button>allow propagation</button><br />
      <button id="stopPropagation">stop propagation</button><br />
      <button id="stopImmediatePropagation">immediate stop propagation</button>
    </div>
  </div>
</div>
<pre></pre>

CSS

css

div {
  display: inline-block;
  padding: 10px;
  background-color: white;
  border: 2px solid black;
  margin: 10px;
}

button {
  width: 100px;
  color: #000088;
  padding: 5px;
  background-color: white;
  border: 2px solid black;
  border-radius: 30px;
  margin: 5px;
}

JavaScript

const outElem = document.querySelector("pre");

/* Clear the output */
document.addEventListener(
  "click",
  () => {
    outElem.textContent = "";
  },
  true,
);

/* Set event listeners for the buttons */
document.querySelectorAll("button").forEach((elem) => {
  for (let i = 1; i <= 3; i++) {
    elem.addEventListener("click", (evt) => {
      /* Do any propagation stopping in first event handler */
      if (i === 1 && elem.id) {
        evt[elem.id]();
        outElem.textContent += `Event handler for event 1 calling ${elem.id}()\n`;
      }

      outElem.textContent += `Click event ${i} processed on "${elem.textContent}" button\n`;
    });
  }
});

/* Set event listeners for the divs */
document
  .querySelectorAll("div")
  .forEach((elem) =>
    elem.addEventListener(
      "click",
      (evt) =>
        (outElem.textContent += `Click event processed on "${elem.firstChild.data.trim()}"\n`),
    ),
  );

结果

每个 click 事件处理程序在被调用时都会显示一个状态消息。如果单击中间的按钮，您会发现 stopPropagation() 允许为该按钮上的 click 事件注册的所有事件处理程序执行，但会阻止 div 上的 click 事件处理程序的执行（这些处理程序通常会在之后执行）。但是，如果您单击底部的按钮，stopImmediatePropagation() 将在调用它的事件之后停止所有冒泡。