MENU


Stopping Event Propagation

stopPropagation() keeps the event from reaching further elements; stopImmediatePropagation() also skips the remaining listeners on the current element.

Which listeners run after each callHTMLLive
<div><button>none</button> <button>stop</button> <button>stopImmediate</button></div>
<pre style="margin:0"></pre>
<script>
  const out = document.querySelector("pre");
  document.querySelector("div").addEventListener("click", () => out.append("div"));
  for (const btn of document.querySelectorAll("button")) {
    btn.addEventListener("click", (e) => e[`${btn.textContent}Propagation`]?.());
    btn.addEventListener("click", () => out.append("2nd listener, "));
    out.append(`${btn.textContent}: `); btn.click(); out.append("\n");
  }
</script>
Browser output of Listing 8.54
Browser output of 54

A stopped event never reaches delegated listeners, analytics or a "click outside to close" handler, so prefer checking event.target in the outer handler.