В чём разница между event.stopPropagation() и event.stopImmediatePropagation()?

Question

stopPropagation() — останавливает всплытие события (но другие обработчики на этом же элементе сработают).stopImmediatePropagation() — останавливает всплытие и все остальные обработчики на этом элементе.

YeaHub · Accepted Answer

Пример:const div = document.querySelector("div");

div.addEventListener("click", (event) => {
  console.log("Первый обработчик");
  event.stopPropagation(); // Остановит всплытие, но второй обработчик сработает
});

div.addEventListener("click", (event) => {
  console.log("Второй обработчик"); // Всё равно выполнится
});

document.body.addEventListener("click", () => {
  console.log("Не сработает (всплытие остановлено)");
});С stopImmediatePropagation():div.addEventListener("click", (event) => {
  console.log("Первый обработчик");
  event.stopImmediatePropagation(); // Остановит всё
});

div.addEventListener("click", () => {
  console.log("Этот код не выполнится");
});Когда использовать:stopPropagation() — когда нужно запретить всплытие, но дать шанс другим обработчикам на этом элементе.stopImmediatePropagation() — когда нужно полностью отменить все последующие обработчики (например, для приоритетных событий).Важно: Ни один из методов не отменяет действие браузера по умолчанию (для этого есть event.preventDefault()).