事件：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() 將在呼叫它的事件之後停止所有冒泡。