JavaScript Event preventDefault() Method

What You’ll Learn

The preventDefault() method tells the browser not to run the default action for an event—following a link, submitting a form, toggling a checkbox, and more. Learn how it pairs with cancelable and defaultPrevented, and when it has no effect—with five examples and try-it labs.

Introduction

Many events have a default action built into the browser. Clicking an <a href> navigates. Submitting a form sends data. Clicking a checkbox toggles it. Sometimes you want to handle the interaction yourself in JavaScript instead.

Call event.preventDefault() inside a listener. The event still bubbles (unless you stop it), but the browser skips that default behavior. If the event is not cancelable, the call does nothing.

Understanding Event.preventDefault()

An instance method that cancels the event’s default action when the event is cancelable.

• No parameters — call event.preventDefault().
• Return value — none (undefined).
• Requires cancelable — if event.cancelable is false, nothing happens.
• Sets defaultPrevented — becomes true after a successful cancel.
• Does not stop propagation — other listeners still run unless you stop them.
• Passive listeners — calling it may be ignored and warn in the console.
• Baseline Widely available on MDN (since July 2015); also in Web Workers.

📝 Syntax

preventDefault()

Parameters

None.

Return value

None (undefined).

Typical pattern

link.addEventListener("click", (event) => {
  event.preventDefault();
  // Handle navigation yourself (SPA route, modal, etc.)
});

Safe pattern (check cancelable)

element.addEventListener("wheel", (event) => {
  if (event.cancelable) {
    event.preventDefault();
  }
});

⚖️ preventDefault() vs Related Ideas

Examples Gallery

Examples follow MDN Event: preventDefault(). Use View Output or Try It Yourself.

checkbox.addEventListener("click", (event) => {
  event.preventDefault();
  console.log("preventDefault() won't let you check this!");
});

preventDefault() won't let you check this!

link.addEventListener("click", (event) => {
  event.preventDefault();
  out.textContent = "Stayed on this page. href was " + link.href;
});

Stayed on this page. href was https://example.com/

form.addEventListener("submit", (event) => {
  event.preventDefault();
  out.textContent = "Submit canceled — handled in JavaScript";
});

Submit canceled — handled in JavaScript

button.addEventListener("click", (event) => {
  if (event.cancelable) {
    event.preventDefault();
    out.textContent = "Canceled (cancelable was true)";
  } else {
    out.textContent = "Not cancelable — preventDefault skipped";
  }
});

Canceled (cancelable was true)

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

before: false
after: true

🚀 Common Use Cases

• SPA link clicks that should not reload the page.
• Custom form submit with fetch / validation.
• Blocking checkbox / context-menu / drag defaults when you own the UI.
• Custom keyboard shortcuts (for example prevent browser Find on Ctrl+F in an app).
• Teaching cancelable vs defaultPrevented for beginners.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since July 2015) — no Deprecated / Experimental / Non-standard banner.
• Available in Web Workers.
• Passive listeners: preventDefault() may be ignored (and may warn).
• Prefer HTML/CSS alternatives when they fit (disabled, validation, overflow).
• Related learning: cancelable, defaultPrevented, returnValue (deprecated), initEvent(), dispatchEvent().

💡 Best Practices