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 :)
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:
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.
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.
On checkbox and radio input, you can preventDefault the action on the click event.
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);
Now let’s talk about stopPropagation function. You will have to know some basics about the propagation of events in the DOM.
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:
So what does stopPropagation?
You may have guessed it, when you call the function stopPropagation on the event, it will stop the propation 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.
I have spoiled a little at the end of the previous part. But imagine we have two event listeners on the button:
eventListener1FIRST registered handlereventListener2SECOND 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');
});
We made it. As you can see it’s not a complex concept but so important to know. To summarize:
preventDefaultwill prevent the default action of the browser to be executed. For example: form submission, navigation when clicking onawith href, …stopPropagationwill stop the propagation of the event. (see the prerequisite image onstopPropagationpart)stopImmediatePropagationwill stop the propagation of event AND will not execute other listener on the same element.
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.