JavaScript Event stopImmediatePropagation() Method

Beginner
5 min read
Updated: Nov 2026
3 examples
Method
Decorative image with the word STOPIMMEDIATEPROPAGATION

Definition

event.stopImmediatePropagation() prevents other listeners of the same event from being called (MDN). That includes remaining listeners on the current element and listeners on other elements later in the path.

Pass the required arguments shown below. Check return values and browser support before you rely on the result.

Syntax

Call event.stopImmediatePropagation. Start with this line.

JavaScript
event.stopImmediatePropagation()
CallWhat it does
event.stopImmediatePropagation()Primary signature.
event.stopImmediatePropagation(...)Call with the arguments your case needs.

Built into the browser. Call stopImmediatePropagation(...) on an Event instance — no import required.

Library declarations
JavaScript
event.stopImmediatePropagation()

Parameters

This member has no parameters beyond those shown in the signature.

Return Value

Return ValueDescription
*undefined

JavaScript Examples

Example 1 — Skip Later Same-Element Listeners

Handler 1 stops; handlers 2 and 3 never run.

JavaScript
const btn = document.querySelector("#btn");

btn.addEventListener("click", (e) => {
  console.log("1");
  e.stopImmediatePropagation();
});
btn.addEventListener("click", () => console.log("2"));
btn.addEventListener("click", () => console.log("3"));

// Click → only "1"
Try It Yourself

How It Works

  1. Add three listeners. They run in add order.
  2. First listener stops. stopImmediatePropagation() runs first.
  3. Later ones skip. Handlers 2 and 3 never fire for this event.
  4. Order matters. If handler 2 called it, handler 1 would still have run.

Example 2 — vs stopPropagation()

Same-element listeners still run when you only stop propagation.

JavaScript
const btn = document.querySelector("#btn");

btn.addEventListener("click", (e) => {
  console.log("A");
  e.stopPropagation(); // not immediate
});
btn.addEventListener("click", () => console.log("B"));
btn.addEventListener("click", () => console.log("C"));

// Click → "A", "B", "C" (parent still blocked)
Try It Yourself

How It Works

  1. Use stopPropagation. Blocks travel to other elements.
  2. Same element continues. B and C still run after A.
  3. Contrast. Immediate stop would print only A.
  4. Pick the right tool. Need to silence siblings on the same node? Use immediate.

Example 3 — Parent Listener Also Skipped

Immediate stop blocks bubbling to a parent as well.

JavaScript
const wrap = document.querySelector("#wrap");
const btn = document.querySelector("#btn");

wrap.addEventListener("click", () => console.log("parent"));
btn.addEventListener("click", (e) => {
  console.log("child");
  e.stopImmediatePropagation();
});
btn.addEventListener("click", () => console.log("child-2"));

// Click button → only "child"
Try It Yourself

How It Works

  1. Parent listens. Would normally hear the bubble.
  2. Child stops immediately. First child handler wins.
  3. Second child skipped. Same-element leftover is blocked.
  4. Parent skipped. No further path listeners run.
Compatibility

Browser Support

Event.stopImmediatePropagation() is Baseline Widely available (MDN: since July 2015). It is also available in Web Workers. Safe to use in modern teaching and production code.

✓ Baseline · Widely available

Event.stopImmediatePropagation()

Stops remaining listeners on the current target and any later listeners on the event path. Stronger than stopPropagation for same-element handlers.

Excellent Baseline
Google Chrome Supported · long-standing
Full support
Mozilla Firefox Supported · long-standing
Full support
Apple Safari Supported · modern versions
Full support
Microsoft Edge Supported · Chromium
Full support
Opera Supported · modern versions
Full support
Internet Explorer Supported · IE9+
Full support
stopImmediatePropagation() Widely available

Bottom line: Call it when later same-element handlers must not run. Pair with preventDefault() only when you also need to cancel the browser default.

Frequently Asked Questions

It prevents any other listeners for the same event from running—both remaining listeners on the current element and listeners on any other elements that would run later in the event path.
No. MDN marks Event.stopImmediatePropagation() as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard. It is also available in Web Workers.
stopPropagation() stops the event from reaching other elements, but other listeners already registered on the same element still run. stopImmediatePropagation() also skips those remaining same-element listeners.
Yes. Listeners on the same element for the same type run in the order they were added. Only listeners after the one that calls stopImmediatePropagation() are skipped on that element.
No. It only affects which listeners run. Use preventDefault() to cancel the browser default (when the event is cancelable).
When you must guarantee no later handler on the same target runs—for example a validation gate that must win over other click handlers on the same button.

Next: stopPropagation()

Continue with the next Event method in the JavaScript guide.

stopPropagation() tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

9 people found this page helpful

JavaScript Event preventDefault() Method JavaScript Event stopPropagation() Method