JavaScript Event returnValue Property

What You’ll Learn

The returnValue property is a deprecated boolean that tracks whether the event’s default action is still allowed. It defaults to true; set it to false to cancel. Learn how it mirrors the opposite of defaultPrevented and how to migrate—with five examples and try-it labs.

Introduction

Old event code often canceled a link or submit by writing event.returnValue = false (similar ideas also appeared as return false in some handlers). Modern code uses event.preventDefault() instead.

returnValue was adopted into the DOM mainly to support existing code. MDN recommends preventDefault() and defaultPrevented for new work.

Understanding Event.returnValue

An instance property that indicates whether the default action for this event has been prevented.

• true (default) — default action is still allowed.
• false — default action has been prevented / event canceled.
• Writable (legacy) — setting false requests cancel (like preventDefault()).
• Opposite of defaultPrevented — per MDN.
• Deprecated — keep for legacy reading; use modern APIs in new code.
• Web Workers — MDN notes it is available in workers.

📝 Syntax

event.returnValue
event.returnValue = false; // legacy cancel

Value

A boolean: true if the event has not been canceled; false if it has been canceled or the default was prevented.

Modern replacement

// Prefer this in new code:
event.preventDefault();
console.log(event.defaultPrevented); // true when cancel worked

⚖️ returnValue vs Related Ideas

Examples Gallery

Examples follow MDN Event: returnValue. Learn the legacy flag, then migrate to modern methods.

button.addEventListener("click", (event) => {
  console.log(event.returnValue); // true (default allowed)
});

true

link.addEventListener("click", (event) => {
  event.returnValue = false; // legacy — prefer preventDefault()
  out.textContent =
    "returnValue = " + event.returnValue +
    "\ndefaultPrevented = " + event.defaultPrevented;
});

returnValue = false
defaultPrevented = true

form.addEventListener("submit", (event) => {
  event.preventDefault();
  console.log("defaultPrevented:", event.defaultPrevented); // true
  console.log("returnValue:", event.returnValue);           // false
  console.log("opposite?", event.returnValue === !event.defaultPrevented);
});

defaultPrevented: true
returnValue: false
opposite? true

// Legacy (avoid in new code):
// event.returnValue = false;

// Modern:
if (event.cancelable) {
  event.preventDefault();
}
if (event.defaultPrevented) {
  console.log("Default was canceled the modern way");
}

Default was canceled the modern way

link.addEventListener("click", (event) => {
  event.preventDefault();
  out.textContent =
    "Navigating canceled\n" +
    "defaultPrevented = " + event.defaultPrevented + "\n" +
    "returnValue = " + event.returnValue;
});

Navigating canceled
defaultPrevented = true
returnValue = false

🚀 Common Use Cases

• Reading legacy handlers that set returnValue = false.
• Migrating old cancel logic to preventDefault().
• Teaching the polarity opposite of defaultPrevented.
• Debugging mixed codebases during a cleanup pass.
• Interviews: know the history, recommend the modern API.

🔧 How It Works

📝 Notes

• MDN: Deprecated — show the banner; not Experimental / Non-standard on that page.
• Present primarily to support existing code; prefer preventDefault() / defaultPrevented.
• Available in Web Workers.
• Not the same as HTMLDialogElement.returnValue.
• Related learning: defaultPrevented, cancelable, cancelBubble, originalTarget, JavaScript hub.

💡 Best Practices