JavaScript Event cancelable Property

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

Definition

Event.cancelable is a read-only boolean that tells you whether the event can be canceled with preventDefault() so the browser skips its default action (MDN). If it is false, preventDefault() cannot stop that default.

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

Syntax

Use event.cancelable. Start with this line.

JavaScript
event.cancelable
CallWhat it does
event.cancelablePrimary signature.

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

Library declarations
JavaScript
event.cancelable

Parameters

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

Return Value

Return ValueDescription
*The current value of event.cancelable.

JavaScript Examples

Example 1 — Read cancelable on a Click

Built-in click events are cancelable — log the flag when the user clicks.

JavaScript
document.getElementById("btn").addEventListener("click", (event) => {
  console.log(event.cancelable); // true for click
});
Try It Yourself

How It Works

  1. Attach a listener. The handler receives the browser’s click event.
  2. Read the flag. event.cancelable is true for click.
  3. Meaning. You may call preventDefault() if you need to block the default action.
  4. No mutation. Reading cancelable does not change the event.

Example 2 — cancelable: true vs Default

Synthetic events default to non-cancelable unless you opt in.

JavaScript
const soft = new Event("save"); // default cancelable: false
const hard = new Event("save", { cancelable: true });

console.log(soft.cancelable); // false
console.log(hard.cancelable); // true
Try It Yourself

How It Works

  1. Default construction. new Event("save") uses cancelable: false.
  2. Opt in. Pass { cancelable: true } so listeners may cancel.
  3. Read-only after. You cannot assign event.cancelable = true later.
  4. Rule. If your app API should be cancelable, set the option at creation.

Example 3 — Check Before preventDefault

MDN-style guard: only cancel when the event allows it, then confirm with defaultPrevented.

JavaScript
const target = new EventTarget();

target.addEventListener("save", (event) => {
  if (event.cancelable) {
    event.preventDefault();
  }
  console.log(event.defaultPrevented); // true
});

target.dispatchEvent(new Event("save", { cancelable: true }));
Try It Yourself

How It Works

  1. Dispatch a cancelable event. Options set cancelable to true.
  2. Guard. The listener checks event.cancelable before canceling.
  3. Cancel. preventDefault() marks the default as prevented.
  4. Confirm. defaultPrevented is true; dispatchEvent returns false when the default was canceled.
Compatibility

Browser Support

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

✓ Baseline · Widely available

Event.cancelable

Read-only boolean: true if preventDefault() can cancel the event’s default action. Supported across modern browsers and legacy IE.

100% Widely available
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
Event.cancelable Excellent

Bottom line: Safe to use everywhere. Read event.cancelable before preventDefault() in shared handlers. Set cancelable only when constructing synthetic events.

Frequently Asked Questions

It is a read-only boolean. true means preventDefault() can cancel the event’s default action; false means the default cannot be stopped that way.
No. MDN marks Event.cancelable as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard. It is also available in Web Workers.
Call event.preventDefault() in a listener when event.cancelable is true. After a successful cancel, event.defaultPrevented becomes true.
No. cancelable is read-only. For synthetic events, set it with new Event(type, { cancelable: true }). Built-in events get their value from the browser.
MDN notes that some events (for example later wheel events in a sequence) may not be cancelable. Shared handlers should check cancelable before calling preventDefault().
No. bubbles controls whether the event travels up the DOM. cancelable controls whether preventDefault() can block the default action. They are independent flags.

Next: cancelBubble

Learn the legacy flag and prefer stopPropagation() in modern code.

cancelBubble 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 bubbles Property JavaScript Event cancelBubble Property