JavaScript Event cancelBubble Property

What You’ll Learn

The cancelBubble property is a deprecated boolean on Event. Setting it to true before returning from a handler stops further propagation. Learn what it did, why it is deprecated, how it compares to stopPropagation(), and how to migrate—with five examples and try-it labs.

Introduction

Older scripts sometimes wrote event.cancelBubble = true to keep an event from continuing through the DOM. That idea still matters; the modern API for it is event.stopPropagation().

You may still see cancelBubble in legacy handlers (especially old onclick = assignments). Understand it so you can replace it cleanly—do not copy it into new projects.

Understanding Event.cancelBubble

An instance property (deprecated) that historically answered: “Should this event stop propagating further?”

• Value — boolean; true means do not propagate further.
• Write true — stops further propagation (legacy behavior).
• Write false — does nothing in later implementations (MDN).
• Modern replacement — event.stopPropagation().
• Deprecated on MDN; available in Web Workers but still avoid it.

📝 Syntax

event.cancelBubble = true; // deprecated — prefer stopPropagation()

Value

A boolean. The value true means the event must not be propagated further.

Preferred modern form

elem.addEventListener("click", (event) => {
  // Do cool things here
  event.stopPropagation();
});

⚖️ cancelBubble vs Related Ideas

🔄 Migrate to stopPropagation()

// Legacy (avoid in new code):
elem.onclick = (event) => {
  event.cancelBubble = true;
};

// Modern replacement:
elem.addEventListener("click", (event) => {
  event.stopPropagation();
});

Behavior goal is the same: ancestors should not see the event after your handler. Prefer addEventListener so you can register multiple listeners and remove them cleanly.

Examples Gallery

Examples follow MDN Event: cancelBubble and show the modern replacement. Prefer stopPropagation() in real apps.

elem.onclick = (event) => {
  // Do cool things here
  event.cancelBubble = true; // deprecated
};

Child handler ran; parent did not (cancelBubble = true)

elem.addEventListener("click", (event) => {
  // Do cool things here
  event.stopPropagation();
});

Child handler ran; parent did not (stopPropagation)

const parent = document.getElementById("parent");
const child = document.getElementById("child");
const log = [];

parent.addEventListener("ping", () => log.push("parent"));
child.addEventListener("ping", (e) => {
  log.push("child");
  e.cancelBubble = true; // prefer e.stopPropagation()
});

child.dispatchEvent(new Event("ping", { bubbles: true }));
console.log(log.join(" → ")); // "child"

child

child.addEventListener("ping", (e) => {
  e.cancelBubble = false; // no-op in modern engines
});

// Parent will still hear a bubbling ping
parent.addEventListener("ping", () => {
  console.log("parent still heard it");
});

child.dispatchEvent(new Event("ping", { bubbles: true }));

parent still heard it

function stopLegacy(e) {
  e.cancelBubble = true;
}

function stopModern(e) {
  e.stopPropagation();
}

// Both prevent the parent from hearing a bubbling "ping"
child.addEventListener("ping", useModern ? stopModern : stopLegacy);

Both styles: child only (parent blocked)

🚀 Common Use Cases

• Reading and updating legacy onclick / IE-era handlers.
• Teaching the difference between stopping bubble vs canceling defaults.
• Migrating codebases from cancelBubble to stopPropagation.
• Component boundaries that must own a click without notifying parents (use modern API).
• Debugging why a parent listener never fires (someone stopped propagation).

🔧 How It Works

📝 Notes

• MDN: Deprecated — Deprecated banner shown before What You’ll Learn.
• Not Experimental / Non-standard on MDN, but still avoid in new code.
• Available in Web Workers (still deprecated).
• Setting false is a no-op in later implementations.
• Related learning: bubbles, cancelable, Event(), addEventListener(), JavaScript hub.

💡 Best Practices