jamestowers
1/4/2018 - 8:31 PM

Detect external click

How to Detect Clicks Outside of An Element - Vanilla JS

From: https://techstacker.com/posts/yz6e9Ksz6ARbNpQAZ/vanilla-javascript-how-to-detect-clicks-outside-of-an


## html

<div class="box">
If you click anywhere outside of me, I’m gone 
faster than you can snap your fingers.
</div>

## css
.js-is-hidden {
    display: none;
}

## js

var box = document.querySelector(".box");

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

// If user clicks inside the element, do nothing
if (event.target.closest(".box")) return;

// If user clicks outside the element, hide it!
    box.classList.add("js-is-hidden");
});