How to stop event propagation in JavaScript
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Stopping event propagation prevents events from bubbling up to parent elements, giving you precise control over which elements respond to events.
As the creator of CoreUI, a widely used open-source UI library, I’ve used stopPropagation extensively in nested components like modals, dropdowns, and complex UI interactions.
From my expertise, the stopPropagation() method is crucial when you have overlapping interactive elements and need to prevent unwanted event triggers.
This approach ensures events are handled exactly where intended without affecting parent elements.
Use event.stopPropagation() to prevent an event from bubbling up to parent elements.
document.querySelector('.child').addEventListener('click', (event) => {
event.stopPropagation()
console.log('Only child handler runs')
})
Here event.stopPropagation() stops the click event from bubbling up to parent elements that might also have click handlers. Without this method, clicking the child element would trigger handlers on both the child and any parent elements, which is often undesired behavior in complex UI components.
Best Practice Note:
Use stopPropagation() sparingly, as it can make debugging event flow more difficult. Consider event delegation patterns as an alternative. This is the same approach we use in CoreUI components like modals and dropdowns to prevent clicks from closing overlays unintentionally.
