Событие: метод stopImmediatePropagation()

Базовая Широко поддерживается

Эта функция хорошо отработана и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

Примечание: Эта функция доступна в Веб-воркерах.

Метод stopImmediatePropagation() интерфейса Event предотвращает вызов других обработчиков того же события.

Если к одному элементу прикреплено несколько обработчиков одного типа события, они вызываются в порядке, в котором были добавлены. Если stopImmediatePropagation() вызывается во время одного из таких вызовов, больше никаких обработчиков не будут вызваны, ни на этом элементе, ни на других.

Синтаксис

event.stopImmediatePropagation()

Примеры

Сравнение функций остановки событий

В примере ниже три кнопки находятся внутри трёх вложенных div. Для каждой кнопки зарегистрированы три обработчика событий клика, а для каждого div также зарегистрирован обработчик события клика.

Верхняя кнопка позволяет нормальной передаче события.
Средняя кнопка вызывает stopPropagation() в своём первом обработчике события.
Нижняя кнопка вызывает stopImmediatePropagation() в своём первом обработчике события.

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

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

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①

Совместимость с браузерами

	Рабочие столы					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`stopImmediatePropagation`	5	12	10	≤12.1	5	18	10	≤12.1	5	1.0	≤37

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Event/stopImmediatePropagation