Handle click outside

JavaScript, Browser, Event · Jan 6, 2021

Runs the callback whenever the user clicks outside of the specified element.

Use EventTarget.addEventListener() to listen for 'click' events.
Use Node.contains() to check if Event.target is a descendant of element and run callback if not.

const onClickOutside = (element, callback) => {
  document.addEventListener('click', e => {
    if (!element.contains(e.target)) callback();
  });
};

onClickOutside('#my-element', () => console.log('Hello'));
// Will log 'Hello' whenever the user clicks outside of #my-element

Written by Angelos Chalaris

I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.

If you want to keep in touch, follow me on GitHub or Twitter.