JavaScript Event stopPropagation() Method

What You’ll Learn

The stopPropagation() method prevents further propagation of the current event in the capturing and bubbling phases. Same-element listeners still run. Learn how it differs from preventDefault() and stopImmediatePropagation()—with five examples and try-it labs.

Introduction

When you click a button inside a div, the event can travel: capture down the tree, then bubble back up. A parent listener often hears the same click—useful for delegation, annoying when the parent should not react.

Call event.stopPropagation() to stop that further travel. Other handlers on the same button still run. Links still navigate unless you also call preventDefault(). To skip remaining same-element listeners too, use stopImmediatePropagation().

Understanding Event.stopPropagation()

An instance method that prevents further propagation of the current event in the capturing and bubbling phases.

• No parameters — call event.stopPropagation().
• Return value — none (undefined).
• Stops further path — parents (bubble) or deeper nodes (if called during capture) do not receive it later.
• Same-element listeners — still run (unlike stopImmediatePropagation).
• Defaults unchanged — use preventDefault() to cancel navigation / submit / etc.
• Baseline Widely available on MDN (since July 2015); also in Web Workers.

📝 Syntax

stopPropagation()

Parameters

None.

Return value

None (undefined).

Typical pattern

child.addEventListener("click", (event) => {
  event.stopPropagation();
  // Parent click listeners will not hear this click
});

⚖️ stopPropagation() vs Related Ideas

Examples Gallery

Examples follow MDN Event: stopPropagation() and pair well with the stopImmediatePropagation compare demos.

child.addEventListener("click", (event) => {
  out.textContent += "child\n";
  event.stopPropagation();
});
parent.addEventListener("click", () => {
  out.textContent += "parent\n";
});

child

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

1
2
3

link.addEventListener("click", (event) => {
  event.stopPropagation();   // parent won't hear
  event.preventDefault();    // browser won't navigate
  out.textContent = "Stopped path + canceled navigation";
});

Stopped path + canceled navigation

card.addEventListener("click", () => {
  out.textContent = "Card selected";
});
closeBtn.addEventListener("click", (event) => {
  event.stopPropagation();
  out.textContent = "Close only — card not selected";
});

Close only — card not selected

parent.addEventListener("click", (event) => {
  out.textContent += "parent capture\n";
  event.stopPropagation();
}, true); // capture

child.addEventListener("click", () => {
  out.textContent += "child\n"; // skipped when capture stopped
});

parent capture

🚀 Common Use Cases

• Inner buttons that must not trigger an outer card / row click handler.
• Dropdown menus where clicks inside should not close via a document listener (with care).
• Isolating third-party widgets from page-level click analytics.
• Teaching bubble vs capture with a clear “stop here” demo.
• Pairing with preventDefault for full control of a link or form control.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since July 2015) — no Deprecated / Experimental / Non-standard banner.
• Available in Web Workers.
• Does not cancel default actions—see preventDefault().
• Does not skip remaining same-element listeners—see stopImmediatePropagation().
• Related learning: stopImmediatePropagation(), preventDefault(), cancelBubble, bubbles, eventPhase.

💡 Best Practices