JavaScript Event cancelBubble Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word CANCELBUBBLE

Definition

In JavaScript, the cancelBubble property of the Event interface is a deprecated boolean. Setting it to true before returning from a handler prevents further propagation (MDN).

Read the notes below before you rely on this property. Prefer feature detection when support is limited.

Syntax

Use event.cancelBubble. Start with this line.

JavaScript
event.cancelBubble = true;
CallWhat it does
event.cancelBubble = true;Primary signature.

Built into the browser. Read event.cancelBubble on an Event instance — no import required.

Library declarations
JavaScript
event.cancelBubble = true;

Parameters

ParameterDescription
stopPropagation()Required. Modern equivalent
cancelBubble = falseOptional. No effect in later engines

Return Value

Return ValueDescription
*The current value of event.cancelBubble.

JavaScript Examples

Example 1 — Legacy cancelBubble = true

MDN pattern you may still see in old onclick handlers.

JavaScript
const child = document.getElementById("child");

child.onclick = (event) => {
  console.log("child");
  event.cancelBubble = true; // deprecated
};
Try It Yourself

How It Works

  1. Child handler runs on click.
  2. Set cancelBubble = true. Further propagation is blocked (legacy).
  3. Parent stays quiet if it only listens during bubble.
  4. Do not copy this into new projects — migrate next.

Example 2 — Prefer stopPropagation()

Same intent, supported modern API (MDN replacement).

JavaScript
const child = document.getElementById("child");

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

How It Works

  1. Use addEventListener. Clearer than assigning onclick.
  2. Call stopPropagation(). Stops further capture/bubble travel.
  3. Same visible result as legacy cancelBubble = true.
  4. This is the code to keep in production.

Example 3 — Migrate Side by Side

Replace the deprecated assignment with the method call.

JavaScript
// before (deprecated)
event.cancelBubble = true;

// after (preferred)
event.stopPropagation();

// note (MDN): cancelBubble = false does nothing later
Try It Yourself

How It Works

  1. Find every cancelBubble = true in the codebase.
  2. Replace with stopPropagation().
  3. Ignore = false — it is a no-op in modern engines.
  4. Retest parent/child clicks to confirm the same stop behavior.
Compatibility

Browser Support

Event.cancelBubble is marked Deprecated on MDN. Engines still implement it for compatibility, but new code should use stopPropagation(). Also available in Web Workers (still deprecated).

✓ Deprecated

Event.cancelBubble

Legacy boolean stop flag — migrate to Event.stopPropagation().

Legacy Deprecated
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
cancelBubble Prefer stopPropagation

Bottom line: Supported for compatibility, not for new APIs. Prefer event.stopPropagation(). See the MDN cancelBubble reference.

Frequently Asked Questions

It is a deprecated boolean on Event. Setting it to true before returning from a handler prevents further propagation. Prefer Event.stopPropagation() in new code (MDN).
MDN marks Event.cancelBubble as Deprecated. It is not Experimental or Non-standard, but avoid it in new projects and migrate legacy code to stopPropagation().
Call event.stopPropagation() to stop further capturing and bubbling. Use event.stopImmediatePropagation() if you also need to skip remaining listeners on the same target.
MDN notes that in later implementations, setting cancelBubble to false does nothing. Only setting true was meaningful for stopping propagation.
No. cancelable says whether preventDefault() can block the default action. cancelBubble (legacy) stops propagation. They solve different problems.
Yes. MDN notes it is available in Web Workers, but it remains deprecated there too — prefer stopPropagation().

Next: composed

Learn whether an event can cross shadow DOM boundaries.

composed 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)

10 people found this page helpful

JavaScript Event cancelable Property JavaScript Event composed Property