stopPropagation vs stopImmediatePropagation

stopPropagation vs stopImmediatePropagation

stopPropagation

Stops bubbling to parent elements. Other listeners on the same element still run.

element.addEventListener("click", (e) => {
  e.stopPropagation();
  console.log("first");
});
element.addEventListener("click", () => {
  console.log("second"); // still runs
});

stopImmediatePropagation

Stops bubbling AND stops other listeners on the same element.

element.addEventListener("click", (e) => {
  e.stopImmediatePropagation();
  console.log("first");
});
element.addEventListener("click", () => {
  console.log("second"); // does NOT run
});

When to Use Which

• stopPropagation: when you want to prevent parent handlers but allow other handlers on the same element.
• stopImmediatePropagation: when you want to prevent all further handlers (same element and parents).

The Takeaway

stopPropagation: stops bubbling, same-element listeners still run. stopImmediatePropagation: stops bubbling AND same-element listeners. Use stopImmediatePropagation when you want to completely prevent all subsequent handlers.