事件：stopImmediatePropagation() 方法

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

stopImmediatePropagation()是Event接口的方法，它可以阻止对同一事件的其他侦听器进行调用。

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

语法

js
event.stopImmediatePropagation()

示例

比较事件停止函数

下面的示例在三个嵌套的 div 内有三个按钮。每个按钮都注册了三个用于点击事件的事件侦听器，并且每个 div 也注册了一个用于点击事件的事件侦听器。

  • 顶部按钮允许正常的事件传播。
  • 中间按钮在其第一个事件处理程序中调用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: #fff;
  border: 2px solid #000;
  margin: 10px;
}

button {
  width: 100px;
  color: #008;
  padding: 5px;
  background-color: #fff;
  border: 2px solid #000;
  border-radius: 30px;
  margin: 5px;
}

JavaScript

js
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`),
    ),
  );

结果

每个点击事件处理程序在被调用时都会显示一条状态消息。如果您按下中间按钮，您将看到stopPropagation()允许注册在该按钮上的所有点击事件处理程序执行，但会阻止 div 的点击事件处理程序的执行，这些处理程序通常会在后面执行。但是，如果您按下底部按钮，stopImmediatePropagation()会在调用它的事件之后停止所有传播。

规范

规范
DOM 标准
# ref-for-dom-event-stopimmediatepropagation①

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。