# How to prevent default action of an event in JavaScript

By Atta Ur Rehman Shah (https://attacomsian.com/about). Published Aug 26, 2020, updated Sep 23, 2021. Topics: JavaScript.
Canonical URL: https://attacomsian.com/blog/javascript-dom-prevent-default-action-of-an-event

> Learn how to prevent the default action of an event by using the Event.preventDefault() method in JavaScript.

To prevent the default action of an event, you can call the `Event.preventDefault()` method. This method cancels the event if it is cancelable:

```javascript
Event.preventDefault();
```

Note that the `preventDefault()` method does not prevent further propagation of an event through the DOM. To explicitly [stop the event propagation](https://attacomsian.com/blog/javascript-dom-stop-propagation-of-events), use the `stopPropagation()` method in the event handler.

Let us say you have got the following HTML code snippet:

```javascript
<form action="/signup" method="GET" id="forms">
    <button id="signup" type="submit">Sign Up</button>
</form>
```

When you click on the button, the HTML `<form>` is submitted.

To prevent the button from submitting the form, just call the `preventDefault()` method in the button's event handler:

```javascript
const btn = document.querySelector('#signup');

btn.addEventListener('click', (e) => {
    e.preventDefault();

    alert('Unable to submit the form.');
});
```

The `Event.preventDefault()` method works in all modern browsers, and IE9 and above.