Skip to main content Accessibility Feedback

Detecting clicks inside an element with vanilla JavaScript

Yesterday, we learned about the closest() method, a super versatile function that finds the closest matching parent of an element based on a selector.

It has a ton of uses, and it’s particularly useful for detecting whether or not a click event happened inside a particular element.

Imagine you were writing a modal script, and you wanted to close the modal whenever someone clicked or tapped outside of the modal window. How would you do that?

The simplest way is to detect every click that happens on the document, and then check if it’s inside the modal window or not.

// Detect all clicks on the document
document.addEventListener('click', function (event) {

    // If the click happened inside the modal, do nothing
    if (event.target.closest('.modal')) return;

    // Otherwise, close any open modal windows
    // You would add the code for that here...

}, false);

Browser support for closest() is a bit spotty, but a small polyfill adds support back to IE9.

/**
 * Element.closest() polyfill
 * https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill
 */
if (!Element.prototype.closest) {
    if (!Element.prototype.matches) {
        Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
    }
    Element.prototype.closest = function (s) {
        var el = this;
        var ancestor = this;
        if (!document.documentElement.contains(el)) return null;
        do {
            if (ancestor.matches(s)) return ancestor;
            ancestor = ancestor.parentElement;
        } while (ancestor !== null);
        return null;
    };
}

❄️ Black Friday Sale! Make 2018 the year you master JavaScript. From now through Monday, save up to 50% on my top JavaScript learning resources.

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