What is the preventDefault Event Method in JavaScript?

William Le

In this article you’ll learn about the event.preventDefault() method. It’s a reminder of how much control we have over the client (the browser) when programming in JavaScript.

If you’ve ever doubted how much power JavaScript gives you, try using event.preventDefault()! This method actually gives you the ability to prevent a browser’s default behavior for events.

Examples

Let’s explore how preventDefault works via interactive examples. 🎩

Checkboxes

Normally, when you click on a checkbox it’ll toggle the check. However if you use preventDefault it will actually stop the broswer from doing that.

index.html

<input type="checkbox" id="myCheckbox">  

index.js

document
  .getElementById('myCheckbox')
  .addEventListener('click', (event) => {
    event.preventDefault();  // 👈
  });

Crazy! Just like that the browser is prevented from checking the box.

You can use preventDefault on all sorts of different HTML elements. Let’s try using it on a link and an input box:

index.html

<a href="https://duckduckgo.com" id="myLink">DuckDuckGo</a>  

<input type=text" id="myInput"/>

index.js

document.getElementById('myLink')
  .addEventListener('click', (e) => e.preventDefault())

document.getElementById('myInput')
  .addEventListener('keypress', (e) => e.preventDefault())

This is probably obvious but should be mentioned: you’ll need to target the correct event. For example, targeting the keyup event on the <input> won’t prevent you from entering text since that happens during the keydown event.

That’s why we used keypress since it actually covers both keydown/keyup.

Non-Cancelable Events

There are some events that the browser can’t prevent from happening. For example, events like scroll and wheel (for mouse wheel events!) will ignore preventDefault.

document.addEventListener('scroll', (e) => {
  e.cancelable;         // false
  e.preventDefault();   // doh! the page still scrolls 
});

To determine whether an event can be canceled, inspect the event using e.cancelable which will return a boolean value.

Reminder: preventDefault() should be distinguished from stopPropagation() as using preventDefault will still allow your events to bubble up the DOM if you don't also use stopPropagation.

preventDefault in Practice

In real life, you’ll probably resort to using preventDefault most often to stop forms from automatically submitting when the submit button is clicked, giving you a chance to instead submit the form data asynchronously using JavaScript and something like the Fetch API to make an Ajax request.

document
  .getElementById('myForm')
  .addEventListener('submit', (event) => {
    event.preventDefault();  // 👈

    // ...send the form data and get a response asynchronously
  });

Wrapping Up

We’ve only used preventDefault() on some of the more popular event types (click and keypress) but it works with all event types. If you’ve ever doubted how much power JavaScript developers are entrusted with, look no further than preventDefault which can actually veto a browser’s normal behavior!

To learn more about preventDefault visit the Mozilla Developer Network 🤓

  Tweet It

🕵 Search Results

🔎 Searching...

Sponsored by #native_company# — Learn More
#native_title# #native_desc#
#native_cta#