# stopPropagation vs preventDefault vs return false in JS

> When to use event.stopPropagation, event.preventDefault, and return false in DOM events, and why returning false does nothing in vanilla JavaScript.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2020-06-02 | Topics: [JavaScript](https://flaviocopes.com/tags/js/) | Canonical: https://flaviocopes.com/events-stoppropagation-preventdefault/

I feel like I'm always confused by one thing when it comes to handling DOM events in [JavaScript](https://flaviocopes.com/javascript/).

When should I call `stopPropagation()` on the event object?
When should I call `preventDefault()` on the event object?
Should I `return false`?

## Event.stopPropagation

Suppose I want to handle a click event on an element. 

By default an event on a DOM element is fired on the specific element clicked (say, a button) and will be propagated to all its parent elements tree, unless it’s stopped.

I want to make sure the event is handled in my event handler, and it will "stop" there.

You can stop the propagation by calling `stopPropagation()` method of an `Event` object, usually at the end of the event handler:

```js
const link = document.getElementById('my-link')
link.addEventListener('mousedown', event => {
  // process the event
  // ...

  event.stopPropagation()
})
```

## Event.preventDefault

Calling the `preventDefault()` method of the event object will cancel the default handling that the browser is programmed to execute.

Opening a new page on an `a` element `click` event, for example.

Or submitting a `form` on the `submit` event.

Calling `preventDefault()` is what you need to do to completely customize the action. Perhaps by creating a `fetch` request to load some [JSON](https://flaviocopes.com/json/) instead of opening a new page on a link click.

Other event handlers defined on this same element will execute. Unless you call `event.stopImmediatePropagation()`.

## Returning `false`

This is especially confusing to former (or current) [jQuery](https://flaviocopes.com/jquery/) developers. In jQuery, returning `false` from an event handler automatically called `Event.preventDefault` and `Event.stopPropagation` for us.

In vanilla JavaScript, `return false` in an event handler does **nothing**.