The answer
Add a click listener on the overlay. Check if e.target === overlay (the click was on the overlay, not the modal). If so, close the modal. The modal's clicks bubble to the overlay but e.target is the modal, not the overlay.
Event Bubbling: Practical Use Cases
How do you close a modal on overlay click using event bubbling?
More FAQs in Event Bubbling: Practical Use Cases
Event delegation. Instead of adding a listener to each child, add one listener to the parent. When a child is clicked, the event bubbles to the parent, which checks e.target to determine which child was clicked.
Call e.stopPropagation() in the event handler. This prevents the event from propagating to parent elements. Use it when you do not want parent handlers to fire.
document.addEventListener('click', (e) => { /* log or intercept */ }, true). The true flag listens in the capturing phase, so the handler runs before any target handler.
Still have questions?
Browse all our FAQs or reach out to our support team
Want to upskill yourself?
Your learning library
Small steps. Big possibilities.
Find your next course. Build something great.