Skip to main content Accessibility Feedback

Detecting clicks outside of an element with vanilla JS

A few months ago, Brad Frost asked:

So @frostyweather is looking for a vanilla JS way to detect “click outside” an element. Any help?

There are a few ways to handle this, but I find the simplest is by using my getClosest() helper method. It gets the first parent element of another element that matches a selector.

To answer Brad’s question, we can listen to all clicks on the document. We’ll give the element we want to check for clicks outside of a unique selector.

Whenever a click happens, we’ll check to see if that clicked element has a parent element with the selector. If it does, the click was inside the element. If not, it was outside of it.

var getClosest = function (elem, selector) {...};
document.addEventListener('click', function (event) {
    if ( !getClosest(event.target, '.some-selector') ) {
        // Clicked outside the element...
    }
}, false);

And that’s that.


🚀 Make 2018 the year you master JavaScript! My pocket guides and mini courses are short, focused, and made for beginners. You can do this!

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips