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 the Element.closest()
method. It gets the first element up an element’s DOM tree (including the element itself) 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 (!event.target.closest('.some-selector')) {
// Clicked outside the element...
}
}, false);
And that’s that.