How to Stop Propagation of an Event in JavaScript

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:
const 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:
const 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!
If you want to learn about web development, founding a start-up, bootstrapping a SaaS, and more, follow me on Twitter! You can also join the conversation over at our official Discord!
Leave us a message!