JavaScript Event preventDefault() Method

Beginner
5 min read
Updated: Nov 2026
5 examples
Method
Decorative image with the word PREVENTDEFAULT

Definition

event.preventDefault() tells the browser not to run the event’s default action (MDN) — such as following a link, submitting a form, or toggling a checkbox. Propagation continues unless you also stop it.

Pass the required arguments shown below. Check return values and browser support before you rely on the result.

Syntax

Call event.preventDefault. Start with this line.

JavaScript
event.preventDefault()
CallWhat it does
event.preventDefault()Primary signature.
event.preventDefault(...)Call with the arguments your case needs.

Built into the browser. Call preventDefault(...) on an Event instance — no import required.

Library declarations
JavaScript
event.preventDefault()

Parameters

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

Return Value

Return ValueDescription
*undefined

JavaScript Examples

Example 1 — Block Checkbox Toggle

Classic MDN pattern: click still fires; check state does not change.

JavaScript
const checkbox = document.querySelector("#id-checkbox");

checkbox.addEventListener("click", (event) => {
  console.log("click heard — but no toggle");
  event.preventDefault();
});
Try It Yourself

How It Works

  1. Listen for click. Runs when the user clicks the box.
  2. Call preventDefault. Cancels the toggle default.
  3. Handler still runs. You can log or update UI text.
  4. Checked stays false. Default action was blocked.

Example 3 — Stop Form Submit

Validate in JS and cancel the browser’s submit when invalid.

JavaScript
form.addEventListener("submit", (e) => {
  if (!nameInput.value.trim()) {
    e.preventDefault();
    console.log("blocked empty name");
  }
});
Try It Yourself

How It Works

  1. Listen for submit. Fires before the form posts/navigates.
  2. Check your rule. Empty name → cancel.
  3. preventDefault. No navigation / reload.
  4. Prefer HTML constraints when they fit (MDN tip).

Example 4 — cancelable + defaultPrevented

Guard with cancelable, then read defaultPrevented.

JavaScript
button.addEventListener("click", (e) => {
  console.log("cancelable:", e.cancelable);
  if (e.cancelable) e.preventDefault();
  console.log("defaultPrevented:", e.defaultPrevented);
});
Try It Yourself

How It Works

  1. Read cancelable. False → preventDefault is a no-op.
  2. Call when true. Cancel the default safely.
  3. Read defaultPrevented. Confirms a cancel happened.
  4. Synthetic events. Need cancelable: true when you create them.

Example 5 — Still Bubbles

preventDefault does not stop the parent from hearing the event.

JavaScript
child.addEventListener("click", (e) => {
  e.preventDefault();
  console.log("child: default canceled");
});

parent.addEventListener("click", () => {
  console.log("parent: still heard click");
});
Try It Yourself

How It Works

  1. Child cancels default. Browser skips its default action.
  2. Event still bubbles. Parent listener runs.
  3. Different job. Use stopPropagation to stop travel.
  4. Pick the right tool. Default vs path are separate concerns.
Compatibility

Browser Support

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

✓ Baseline · Widely available

Event.preventDefault()

Cancels the browser default action when the event is cancelable. Does not stop propagation. Passive listeners cannot cancel.

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
preventDefault() Excellent

Bottom line: Safe everyday API. Check cancelable / avoid passive listeners when you must cancel. See the MDN preventDefault reference.

Frequently Asked Questions

It tells the browser not to run the event's default action—such as following a link, submitting a form, checking a checkbox, or scrolling—while the event still propagates unless you also stop propagation.
No. MDN marks Event.preventDefault() as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard. It is also available in Web Workers.
No. preventDefault() only cancels the default action. The event still travels through capture/bubble unless you call stopPropagation() or stopImmediatePropagation().
If event.cancelable is false, or if the listener is passive (common for touchmove/wheel). Check cancelable first when unsure. A passive listener that calls preventDefault may also log a console warning.
After a successful cancel, event.defaultPrevented is true. For synthetic cancelable events you dispatch, dispatchEvent() returns false when preventDefault was called.
Sometimes yes. MDN suggests disabled/readonly on controls, HTML constraint validation, or CSS overflow when a declarative option fits better than fighting defaults in JavaScript.

Next: stopImmediatePropagation()

Stop other listeners on the same element from running.

stopImmediatePropagation 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)

8 people found this page helpful

JavaScript Event initEvent() Method JavaScript Event stopImmediatePropagation() Method