References

Beginner-friendly references for web development, with live, editable examples.

The JavaScript preventDefault() method

Method JavaScript All modern browsers Updated
Quick answer

The event.preventDefault() method stops the browser's built-in action for an event — submitting a form, following a link, checking a box. Call it inside an event handler: form.addEventListener("submit", e => { e.preventDefault(); ... }) handles a form with JavaScript instead of reloading the page. It does not stop the event from bubbling — that's stopPropagation().

Overview

preventDefault() is a method on the event object that cancels whatever the browser would normally do in response to that event. Submitting a form reloads the page by default; clicking a link navigates; pressing a key types a character. Call event.preventDefault() in your handler and that default is suppressed, leaving you free to do it your own way.

The number-one use is form handling. form.addEventListener("submit", (e) => { e.preventDefault(); /* validate, fetch, etc. */ }) stops the full-page reload so you can validate or send the data with fetch(). It's also used to intercept link clicks for client-side routing, and to block default key behavior in custom inputs.

Don't confuse it with stopPropagation() — they solve different problems. preventDefault() stops the browser's default action but lets the event keep bubbling up the DOM. stopPropagation() stops the event from bubbling to parent handlers but doesn't cancel the default action. You can call both if you need to. Note that some events are not cancelable (their cancelable is false), in which case preventDefault() has no effect.

Syntax

element.addEventListener("submit", (event) => {
  event.preventDefault();   // stop the default action
  // ...your own handling
});

Example

Live example 
<form id="form" style="font:15px system-ui">
  <input placeholder="Type something" id="field">
  <button>Submit</button>
</form>
<p id="out"></p>
<script>
  document.getElementById('form').addEventListener('submit', (e) => {
    e.preventDefault(); // no page reload
    const value = document.getElementById('field').value;
    document.getElementById('out').textContent = 'You submitted: ' + value;
  });
</script>

Best practices

  • Use it to handle form submits in JavaScript without a full-page reload.
  • Call it early in the handler, before your custom logic, so the default never kicks in.
  • Don't confuse it with stopPropagation() — one cancels the default action, the other stops bubbling.
  • Remember non-cancelable events (where event.cancelable is false) ignore it.

Frequently asked questions

How do I stop a form from reloading the page?
Call event.preventDefault() in the form's submit handler, then handle the data yourself (for example with fetch()).
What does preventDefault() do?
It cancels the browser's default action for an event — link navigation, form submission, checkbox toggling and so on.
What is the difference between preventDefault() and stopPropagation()?
preventDefault() stops the default browser action but lets the event bubble; stopPropagation() stops the event bubbling to parent elements but not the default action.
Why is preventDefault() not working?
The event may not be cancelable (event.cancelable is false), or you may have attached the handler to the wrong element or event.
prepend() querySelector()