JavaScript Event stopPropagation() Method

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

Definition

event.stopPropagation() prevents further travel of the current event in the capturing and bubbling phases (MDN). Other listeners on the same element still run. Defaults (links, forms) are not canceled.

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

Syntax

Call event.stopPropagation. Start with this line.

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

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

Library declarations
JavaScript
event.stopPropagation()

Parameters

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

Return Value

Return ValueDescription
*undefined

JavaScript Examples

Example 1 — Stop Bubbling to Parent

Child click logs; the parent listener does not run.

JavaScript
child.addEventListener("click", (event) => {
  console.log("child");
  event.stopPropagation();
});

parent.addEventListener("click", () => {
  console.log("parent"); // does not run for child clicks
});
Try It Yourself

How It Works

  1. Click the child. The event starts on the button, then would bubble.
  2. Child handler runs. Logs child.
  3. stopPropagation. Blocks further travel up the tree.
  4. Parent stays quiet. Its listener never sees this click.

Example 2 — Same-Element Listeners Still Run

Stopping travel does not cancel other handlers on the current target.

JavaScript
button.addEventListener("click", (e) => {
  console.log("handler 1");
  e.stopPropagation();
});

button.addEventListener("click", () => {
  console.log("handler 2"); // still runs
});

parent.addEventListener("click", () => {
  console.log("parent"); // does not run
});
Try It Yourself

How It Works

  1. Two listeners on the button. Added in order 1 then 2.
  2. Handler 1 stops travel. Path to parents is cut.
  3. Handler 2 still runs. MDN: same-element listeners are not skipped.
  4. Need to skip them? Use stopImmediatePropagation().

Example 3 — Does Not Cancel Defaults

Stopping bubble keeps parents quiet; a link still navigates unless you also preventDefault.

JavaScript
link.addEventListener("click", (e) => {
  e.stopPropagation();
  console.log("bubble stopped — link may still navigate");
  // e.preventDefault(); // uncomment to stay on the page
});

parent.addEventListener("click", () => {
  console.log("parent"); // does not run
});
Try It Yourself

How It Works

  1. Two jobs. Path travel vs default action are separate (MDN).
  2. stopPropagation. Parents do not hear the click.
  3. Default remains. Link navigation still happens unless canceled.
  4. Combine when needed. Call both methods if you need both effects.
Compatibility

Browser Support

Event.stopPropagation() is marked Baseline Widely available on MDN (since July 2015). It is also available in Web Workers.

✓ Baseline · Widely available

Event.stopPropagation()

Stops further capturing and bubbling. Same-element listeners still run. Does not cancel default actions.

100% Widely available
Google Chrome Yes (Baseline)
Yes
Microsoft Edge Yes (Baseline)
Yes
Mozilla Firefox Yes (Baseline)
Yes
Apple Safari Yes (Baseline)
Yes
Opera Yes (Baseline)
Yes
Internet Explorer Supported (legacy)
Yes
stopPropagation() Excellent

Bottom line: Safe everyday API. See the MDN stopPropagation reference. Prefer it over deprecated cancelBubble.

Frequently Asked Questions

It prevents the current event from traveling further in the capturing and bubbling phases. Other listeners on the same element still run. It does not cancel the browser default action.
No. MDN marks Event.stopPropagation() as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard. It is also available in Web Workers.
stopPropagation() still allows remaining listeners on the current element to run, then stops further travel. stopImmediatePropagation() also skips those remaining same-element listeners.
preventDefault() cancels the browser default (link navigation, form submit, and so on). stopPropagation() only affects which other elements hear the event.
It stops further propagation in both capturing and bubbling. Listeners that already ran are not undone. Calling it during capture prevents the event from continuing down (and later up) the tree.
Event.cancelBubble is a deprecated legacy flag related to stopping propagation. Prefer stopPropagation() in modern code.

Next: MouseEvent

Learn the MouseEvent constructor and mouse-specific event fields.

MouseEvent 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 stopImmediatePropagation() Method JavaScript MouseEvent Constructor