Close/hide an element when clicking outside of it (but not inside)

by
  • Assign the desired event listener (like "click") to document or window using EventTarget.addEventListener()
  • Use Event.target in combination with Element.closest() as negation ! – in order to check whether the Event.target (the element that initiated the Event) – its self or closest ancestor have a specific selector.
  • To control an element visibility create a CSS class that does the necessary styling, and use Element.classlist to add, remove or toggle that class (as needed).
const elPopup = document.querySelector("#popup");

addEventListener("click", (evt) => {
  if (!evt.target.closest("#popup")) elPopup.classList.remove("isOpen");
});
#popup {
  padding: 2rem;
  background: gold;
  display: none; /* Hidden popup by default */
}

#popup.isOpen {
  display: block;
}
<div id="popup" class="isOpen">
  Click outside to close me.<br>
  Click inside will do nothing.
</div>
  • Never use Event.stopPropagation() unless you really, really know what you’re doing. Your app or third-party code should be always notified about all events happening in their context.

Usage example: Close popup modal on click outside

More Related Contents:

  1. How do I detect a click outside an element?
  2. jQuery click events firing multiple times
  3. How do I programmatically click a link with javascript?
  4. $(document).click() not working correctly on iPhone. jquery [duplicate]
  5. PhantomJS; click an element
  6. Why is this jQuery click function not working?
  7. Improving performance of click detection on a staggered column isometric grid
  8. Need to cancel click/mouseup events when double-click event detected
  9. Triggering a JavaScript click() event at specific coordinates
  10. What the difference between .click and .change on a checkbox [duplicate]
  11. How to stop default link click behavior with jQuery
  12. How can I detect visited and unvisited links on a page?
  13. Javascript Detect click event outside of div [duplicate]
  14. Detect if user clicks inside a circle
  15. Detect if user clicks inside a circle
  16. Difference between .click() and actually clicking a button? (javascript/jQuery)
  17. JavaScript: Invoking click-event of an anchor tag from javascript
  18. Jquery: mousedown effect (while left click is held down)
  19. How to add click event to an element?
  20. How do I click on this button with Greasemonkey?
  21. Registering jQuery click, first and second click
  22. How to remove all click event handlers using jQuery?
  23. Programmatical click on -tag not working in Firefox
  24. Javascript click event handler – how do I get the reference to the clicked item?
  25. HTML/Javascript Button Click Counter
  26. Is there an equivalent to e.PageX position for ‘touchstart’ event as there is for click event?
  27. jQuery .on() method doesn’t see new elements
  28. Cancel click event in the mouseup event handler
  29. javascript click event handler fires without clicking
  30. Uncaught ReferenceError: Invalid left-hand side in assignment

Leave a Comment