JavaScript Event defaultPrevented Property

What You’ll Learn

The defaultPrevented property is a read-only boolean on every Event: true if preventDefault() canceled the default action, false if it did not. Learn how it pairs with cancelable, MDN’s link logging pattern, and dispatchEvent—with five examples and try-it labs.

Introduction

Calling event.preventDefault() asks the browser not to run its normal action (follow a link, submit a form, and so on). event.defaultPrevented is how you check whether that cancel actually stuck.

Other listeners—often higher in the tree—can read the flag to react differently. MDN’s demo logs “Visiting link…” vs “you cannot visit” based on this property.

Understanding Event.defaultPrevented

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

• Value — true if prevented; false otherwise.
• Read-only — you do not assign to it; preventDefault() updates it.
• Depends on cancelable — non-cancelable events stay false.
• Not stopPropagation — stopping bubble does not set this flag.
• Baseline Widely available on MDN (since July 2015); also in Web Workers.

📝 Syntax

event.defaultPrevented

Value

A boolean: true if the default user agent action was prevented, false if it was not.

Typical pattern

link.addEventListener("click", (event) => {
  if (event.cancelable) {
    event.preventDefault();
  }
  console.log(event.defaultPrevented); // true when cancel worked
});

⚖️ defaultPrevented vs Related Ideas

Examples Gallery

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

function stopLink(event) {
  event.preventDefault();
}

function logClick(event) {
  const log = document.getElementById("log");
  if (event.target.tagName === "A") {
    log.innerText = event.defaultPrevented
      ? `Sorry, but you cannot visit this link!\n${log.innerText}`
      : `Visiting link…\n${log.innerText}`;
  }
}

document.getElementById("link2").addEventListener("click", stopLink);
document.addEventListener("click", logClick);

Sorry, but you cannot visit this link!

button.addEventListener("click", (event) => {
  console.log("before:", event.defaultPrevented); // false
  event.preventDefault();
  console.log("after:", event.defaultPrevented);  // true
});

before: false
after: true

const soft = new Event("save"); // cancelable: false
soft.preventDefault();
console.log(soft.defaultPrevented); // false

const hard = new Event("save", { cancelable: true });
hard.preventDefault();
console.log(hard.defaultPrevented); // true

false
true

const target = new EventTarget();

target.addEventListener("save", (event) => {
  event.preventDefault();
});

const ok = target.dispatchEvent(
  new Event("save", { cancelable: true })
);
console.log(ok); // false — default was prevented

false

form.addEventListener("submit", (event) => {
  const name = input.value.trim();
  if (!name) {
    event.preventDefault();
  }
  out.textContent = "defaultPrevented = " + event.defaultPrevented;
});

defaultPrevented = true

🚀 Common Use Cases

• Document-level click logging that respects canceled links.
• Shared handlers that skip work when another listener already canceled.
• Custom events where callers check dispatchEvent / defaultPrevented.
• Form validation that blocks submit and confirms via the flag.
• Teaching cancelable vs “was it actually canceled?”

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since July 2015) — no Deprecated / Experimental / Non-standard banner.
• Available in Web Workers.
• Read-only—updated by a successful preventDefault().
• Related learning: cancelable, currentTarget, Event(), dispatchEvent(), JavaScript hub.

💡 Best Practices