How to Stop Propagation of an Event in JavaScript
Table of Contents
On the web, events are propagated up to the DOM tree.
This means that if you click on a button, it will also trigger the click event on the button's parent, and so on.
This is usually something that you want, however, sometimes you do not want this event to propagate up to the parent elements.
In this post, we'll learn how to prevent the event from propagating up using JavaScript.
How to prevent the propagation of an event
The recommended way to stop the propagation of an event is to use the the stopPropagation()
method.
This method exists on every event and once called, it will prevent the event from propagating up the DOM tree.
Let's look at an example of a simple click listener:
JAVASCRIPTconst button = document.querySelector("button");
button.addEventListener("click", event => {
console.log("Clicked!");
});
When you click this button, it will fire the event and bubble it up to the top.
At the same time, it will also log the message Clicked!
to the console.
Now let's use stopPropagation()
to prevent the event from bubbling up:
JAVASCRIPTconst button = document.querySelector("button");
button.addEventListener("click", event => {
event.stopPropagation();
console.log("Clicked!");
});
When you click this button, it will not propagate the event up but it will still log the message Clicked!
to the console.
Keep in mind that stopPropagation
is not the same as preventDefault
which will prevent the default action of the event.
If you want to stop the default behavior, use the preventDefault
method instead.
Conclusion
In this post, we learned how to stop the propagation of an event using JavaScript.
Simply call the stopPropagation
method on the event object to stop the event from bubbling up the DOM tree.
Thanks for reading and happy coding!
- Managing PHP Dependencies with Composer
- Getting Started with Express
- How to Set Up Cron Jobs in Linux
- How to deploy a .NET app using Docker
- Best Visual Studio Code Extensions for 2022
- How to build a Discord bot using TypeScript
- How to deploy a PHP app using Docker
- How to deploy a MySQL Server using Docker
- How to deploy an Express app using Docker
- Getting Started with Sass
- Build a Real-Time Chat App with Node, Express, and Socket.io
- Getting User Location using JavaScript's Geolocation API