JavaScript Event cancelable Property

What You’ll Learn

The cancelable property is a read-only boolean on every Event: true if preventDefault() can cancel the event’s default action, false if it cannot. Learn how to read it, set it on synthetic events, check before calling preventDefault, and relate it to defaultPrevented—with five examples and try-it labs.

Introduction

Many browser events have a default action: follow a link, submit a form, scroll on wheel, leave the page on beforeunload. event.cancelable tells you whether your listener is allowed to block that default with preventDefault().

If cancelable is false, calling preventDefault() does nothing useful—the default still happens. Most cancelable browser events come from user interaction. Synthetic events choose cancelability when created.

Understanding Event.cancelable

An instance property that answers: “Can preventDefault() cancel this event’s default action?”

• Value — true if cancelable; false otherwise.
• Read-only — set only at construction for synthetic events.
• Cancel how — call event.preventDefault() when cancelable is true.
• After cancel — event.defaultPrevented becomes true.
• Baseline Widely available on MDN (since July 2015); also in Web Workers.

📝 Syntax

event.cancelable

Value

A boolean: true if the event can be canceled.

Set on synthetic events

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

⚖️ cancelable vs Related Ideas

Examples Gallery

Examples follow MDN Event: cancelable. Use View Output or Try It Yourself.

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

cancelable = true

const a = new Event("save"); // default cancelable: false
const b = new Event("save", { cancelable: true });

console.log(a.cancelable); // false
console.log(b.cancelable); // true

false
true

const target = new EventTarget();

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

target.dispatchEvent(new Event("save", { cancelable: true }));
// → defaultPrevented = true

defaultPrevented = true

function preventScrollWheel(event) {
  if (typeof event.cancelable !== "boolean" || event.cancelable) {
    // The event can be canceled, so we do so.
    event.preventDefault();
  } else {
    // Not safe to call preventDefault()
    console.warn("The following event couldn't be canceled:");
    console.dir(event);
  }
}

document.addEventListener("wheel", preventScrollWheel, { passive: false });

Wheel over the pad is blocked when cancelable is true
(Some later wheel events in a sequence may not be cancelable)

const link = document.getElementById("link");
const out = document.getElementById("out");

link.addEventListener("click", (event) => {
  if (event.cancelable) {
    event.preventDefault();
    out.textContent = "Navigation canceled (cancelable=" + event.cancelable + ")";
  }
});

Navigation canceled (cancelable=true)

🚀 Common Use Cases

• Blocking form submit or link navigation after validation fails.
• Custom zoom / scroll UIs that cancel wheel when allowed.
• Shared listeners that handle many event types safely.
• Synthetic app events that callers may cancel via preventDefault.
• Confirming leave-page flows with cancelable beforeunload patterns.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since July 2015) — no Deprecated / Experimental / Non-standard banner.
• Available in Web Workers.
• Read-only—set via constructor options for synthetic events.
• Passive listeners cannot cancel (for example wheel with { passive: true }).
• Related learning: bubbles, Event(), wheel, addEventListener(), JavaScript hub.

💡 Best Practices