Using Preventdefault in JavaScript: Full Guide

event.preventDefault() tells the browser: "Do not perform the default action for this event." Every event type has a default behavior that the browser performs automatically, such as a link navigating to a URL, a keypress inserting a character, or a form submission sending data to a server.

preventDefault() blocks that built-in behavior so you can replace it with your own.

Here is the simplest example, stopping a link from navigating:

javascript

const link = document.querySelector("a");
 
link.addEventListener("click", (event) => {
  event.preventDefault();
  console.log("Navigation prevented. You are still on the same page.");
});

Click the link and the page does not go anywhere. The browser's default navigation is blocked, but your console message still runs.

What Default Actions Can You Prevent?

Not all events have cancelable default actions. The scroll event on an element, for example, cannot be canceled because the scrolling already happened by the time the event fires.

Checking if an Event Is Cancelable

Before calling preventDefault(), check event.cancelable. If it is false, the call has no effect:

javascript

document.addEventListener("scroll", (event) => {
  console.log(event.cancelable); // false on elements, true on document
  event.preventDefault(); // Has no effect on elements
});

Most user-initiated events are cancelable. Events dispatched programmatically with dispatchEvent are not cancelable unless you explicitly pass { cancelable: true }.

Practical Use Cases

Intercepting Link Clicks for Client-Side Navigation

In single-page applications, link clicks should not cause a full page reload:

javascript

document.addEventListener("click", (event) => {
  const link = event.target.closest("a");
  if (!link) return;
 
  event.preventDefault();
  const url = link.getAttribute("href");
  console.log(`Navigate to ${url} without reloading the page`);
  // Update the page content with JavaScript instead
});

The listener sits on document and uses closest("a") to catch clicks on any link, even ones nested inside other elements. Blocking the default navigation lets a router swap page content without a full reload.

Validating a Form Before Submission

By default, a form submits and reloads the page as soon as the user clicks submit. Calling preventDefault() inside the submit handler lets you check the data first and only allow the submission to continue when it passes:

javascript

const form = document.querySelector("form");
 
form.addEventListener("submit", (event) => {
  const emailInput = form.querySelector('input[type="email"]');
 
  if (!emailInput.value.includes("@")) {
    event.preventDefault();
    console.log("Invalid email. Form not submitted.");
  }
});

The form only submits when the email contains an @. This is a basic example; real validation should also use HTML constraint attributes like required and type="email".

Blocking the Context Menu for a Custom One

javascript

document.addEventListener("contextmenu", (event) => {
  event.preventDefault();
  console.log("Right-click at:", event.clientX, event.clientY);
  // Show your own custom menu here
});

Restricting Keyboard Input

You can also use preventDefault() with keydown to stop specific characters from ever reaching an input field, which is useful for fields that should only accept digits:

javascript

const input = document.querySelector("input");
 
input.addEventListener("keydown", (event) => {
  // Allow only digits
  if (!/^\d$/.test(event.key) && event.key !== "Backspace") {
    event.preventDefault();
    console.log(`Blocked character: ${event.key}`);
  }
});

Note: keydown fires before the character appears in the input, so preventDefault() blocks it entirely. This is useful for numeric-only fields, but for most input restrictions, prefer the input event with post-validation or HTML attributes like pattern.

preventDefault vs stopPropagation

These two methods are often confused, but they do completely different things:

They are independent. Calling one does not affect the other. You can call both, just one, or neither depending on what you need:

javascript

link.addEventListener("click", (event) => {
  event.preventDefault();  // Do not navigate
  event.stopPropagation(); // Do not let parent elements know about this click
  console.log("Click intercepted completely.");
});

The passive Listener Trap

When you set { passive: true } on a listener, you are promising the browser that you will not call preventDefault(). If you break that promise, the browser ignores the call and logs a warning:

javascript

// This will not work: preventDefault is ignored inside a passive listener
document.addEventListener("wheel", (event) => {
  event.preventDefault(); // Ignored! Browser scrolls anyway.
}, { passive: true });

This is intentional. The passive option lets the browser start scrolling immediately without waiting for your JavaScript to finish, which improves scroll responsiveness. If you genuinely need to prevent the default scroll behavior, you must use { passive: false }:

javascript

document.addEventListener("wheel", (event) => {
  event.preventDefault(); // Works because passive is false
}, { passive: false });

In browsers other than Safari, wheel, touchstart, and touchmove already default to passive: true on Window, Document, and Document.body, so always set { passive: false } explicitly when you need preventDefault on those events.

Better Alternatives to preventDefault

Before reaching for preventDefault(), consider whether a simpler solution exists:

preventDefault is called inside event listeners like click and keydown. If you need a refresher on setting up those listeners, see /javascript/how-to-add-event-listeners-in-js-complete-guide and /javascript/javascript-keyboard-events-keyup-and-keydown.

preventDefault is a JavaScript solution. When an HTML or CSS solution achieves the same result, it is usually simpler, more accessible, and works even before JavaScript loads. Use preventDefault when you need conditional logic, like "only prevent the default if the user has unsaved changes," that cannot be expressed declaratively.

Common Mistakes

Calling preventDefault on a non-cancelable event. Check event.cancelable first if you are unsure.

Forgetting to set { passive: false } on scroll handlers. If your wheel or touchmove handler needs preventDefault, pass the option explicitly.

Assuming preventDefault stops propagation. It does not. The event still bubbles. Use stopPropagation() if you need that behavior.

Using preventDefault when HTML attributes would suffice. A disabled attribute on a button is more robust and accessible than blocking clicks with JavaScript.