JavaScript Event stopImmediatePropagation() Method

What You’ll Learn

The stopImmediatePropagation() method prevents other listeners of the same event from being called—including remaining listeners on the same element and listeners on other elements later in the path. Learn how it differs from stopPropagation(), why listener order matters, and when to use it—with five examples and try-it labs.

Introduction

One element can have many listeners for the same event type. They run in the order they were added. Sometimes the first handler must win completely: no later handler on that button, and no parent handler either.

That is event.stopImmediatePropagation(). It is stronger than stopPropagation(), which still lets other listeners on the same element finish. Neither method cancels the browser default— use preventDefault() for that.

Understanding Event.stopImmediatePropagation()

An instance method that prevents other listeners of the same event from being called.

• No parameters — call event.stopImmediatePropagation().
• Return value — none (undefined).
• Same element — remaining listeners for this type on the current target are skipped.
• Other elements — listeners later on the path (for example parents) are also skipped.
• Order matters — listeners already run before the call are not undone.
• Baseline Widely available on MDN (since July 2015); also in Web Workers.

📝 Syntax

stopImmediatePropagation()

Parameters

None.

Return value

None (undefined).

Typical pattern

button.addEventListener("click", (event) => {
  if (!allowed) {
    event.stopImmediatePropagation();
    return;
  }
  // Only runs when allowed — later click listeners on button are skipped if stopped
});

⚖️ stopImmediatePropagation() vs Related Ideas

Examples Gallery

Examples follow MDN Event: stopImmediatePropagation(). Use View Output or Try It Yourself.

btn.addEventListener("click", (e) => {
  out.textContent += "1\n";
  e.stopImmediatePropagation();
});
btn.addEventListener("click", () => { out.textContent += "2\n"; });
btn.addEventListener("click", () => { out.textContent += "3\n"; });
// Click → only "1"

1

btn.addEventListener("click", (e) => {
  out.textContent += "1\n";
  e.stopPropagation(); // not immediate
});
btn.addEventListener("click", () => { out.textContent += "2\n"; });
btn.addEventListener("click", () => { out.textContent += "3\n"; });
// Click → "1", "2", "3" (parent still skipped)

1
2
3

child.addEventListener("click", (e) => {
  out.textContent += "child\n";
  e.stopImmediatePropagation();
});
parent.addEventListener("click", () => {
  out.textContent += "parent\n"; // never for this click
});

child

btn.addEventListener("click", () => { out.textContent += "early\n"; });
btn.addEventListener("click", (e) => {
  out.textContent += "gate\n";
  e.stopImmediatePropagation();
});
btn.addEventListener("click", () => { out.textContent += "late\n"; });
// Click → early, gate  (late skipped; early already ran)

early
gate

// allow: all button handlers + parent run
// stopPropagation: all button handlers run; parent skipped
// stopImmediatePropagation: only first button handler; parent skipped

handler 1 called stopImmediatePropagation()
Click event 1 processed
(parent not logged)

🚀 Common Use Cases

• A validation or auth gate that must override other click handlers on the same control.
• Third-party widgets where multiple libraries attach to one element.
• Debugging “why did two handlers fire?” by temporarily hard-stopping.
• Teaching the difference between stopPropagation and stopImmediatePropagation.
• Ensuring a once-only critical handler is the last thing that runs for that event on the target.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since July 2015) — no Deprecated / Experimental / Non-standard banner.
• Available in Web Workers.
• Does not replace preventDefault().
• Prefer the weakest stop that meets your need—often stopPropagation is enough.
• Related learning: preventDefault(), cancelBubble, eventPhase, currentTarget, addEventListener().

💡 Best Practices