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 :)
Note: If you do not know these functions, they apply on Events.
preventDefault
Your browser has default actions for some elements that we will see soon. The preventDefault function will prevent these actions.
Note: Not all **Event*s can be cancelled. If it can't, it will just do nothing.
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.
Fun fact: This is what
react-routerdoes with theirLinkcomponent. I talk about this in this article:react-routerdemystified.
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.
Fun fact: That's what does form libraries in React like:
react-hook-form,formik, ... with thehandleSubmitmethod.
Checkbox / radio elements
On checkbox and radio input, you can preventDefault the action on the click event.
Note: It's also possible to prevent the action on input text (and other type), on the event
keypress(will not work on mobiles).
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.
Note: You can see the event phase from the event thanks to the eventPhase property.
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:
Note:
windowis not a DOM element.
stopPropagation role
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.
Warning: If there are other listener on the
divthey will be executed. Here it comes thestopImmediatePropagationfunction, not to executes them too.
Bonus: stopImmediatePropagation
I have spoiled a little at the end of the previous part. But imagine we have two event listeners on the button:
-
eventListener1FIRST registered handler -
eventListener2SECOND 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:
-
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.
Do not hesitate to comment and if you want to see more, you can follow me on Twitter or go to my Website.
Oldest comments (0)