preventDefault vs stopPropagation

Are you still wondering the difference between preventDefault and stopPropagation? So you are using both, so at least one will do what you want. At the end of this article you will know what is the role of each one :)

`preventDefault`

Your browser has default actions for some elements that we will see soon. The preventDefault function will prevent these actions.

Let’s now see some concrete default actions:

Hyperlink with `a` HTML element.

When you define an attribute href on a element, the user will be redirected to the defined url. This action can be cancelled, so the user will not be redirected to the href value.

No redirect of link

Form submission

By default, a form will submit the values of input into an action endpoint (by default the current location) with the method type (by default get). You can prevent this action with preventDefault.

Form action prevented

Checkbox / radio elements

On checkbox and radio input, you can preventDefault the action on the click event.

Checkbox action prevented

Many more

Above, I just listed some of the prevent-able event but there are another ones.

If you want to check if the event you deal with is “prevent-able” you can check the property cancelable:

console.log('Is prevent-able?', event.cancelable);

`stopPropagation`

Now let’s talk about stopPropagation function. You will have to know some basics about the propagation of events in the DOM.

Prerequisite

One thing to know is the event propagation process. There are 3 phases:

Capturing phase: going from the window to the target element.
Target phase: the event has reached the target.
Bubbling phase: going from the target element to the window.

For example when we have the following html:

<html>
  <body>
    <div id="container">
      <button id="myButton">Click me</button>
    </div>
  </body>
</html>

And we are clicking on the button we have the following event propagation:

Event propagation

`stopPropagation` role

So what does stopPropagation?

You may have guessed it, when you call the function stopPropagation on the event, it will stop the propagation we have seen previously.

For example, if I stop the propagation on the div element during the capturing phase, it will never reach the button element.

Event propagation when stopPropagation executes

Bonus: `stopImmediatePropagation`

I have spoiled a little at the end of the previous part. But imagine we have two event listeners on the button:

eventListener1 FIRST registered handler
eventListener2 SECOND registered handler

If we stop the propagation in eventListener1 (thanks to stopPropagation), then both handlers will be executed.

It can happen you do not want to execute other listeners which are on the same element. In this case you will use the stopImmediatePropagation method on the event.

const button = document.getElementById('myButton');

button.addEventListener('click', (event) => {
  event.stopImmediatePropagation();
  console.log('This handler is executed');
});

button.addEventListener('click', (event) => {
  console.log('This handler will never be executed');
});

Conclusion

We made it. As you can see it’s not a complex concept but so important to know. To summarize:

preventDefault will prevent the default action of the browser to be executed. For example: form submission, navigation when clicking on a with href, …
stopPropagation will stop the propagation of the event. (see the prerequisite image on stopPropagation part)
stopImmediatePropagation will stop the propagation of event AND will not execute other listener on the same element.

Thanks for reading

You can find me on Twitter if you want to comment this post or just contact me. Feel free to buy me a coffee if you like the content and encourage me.