Source Code: (back to article)
<!DOCTYPE html>
<html>
<head>
<title>Title of the Document</title>
</head>
<body>
<div class="flyout" id="flyout-example">
<h5 class="flyout-title">This could be a flyout;</h5>
<div class="flyout-debug" id="flyout-debug"></div>
<div class="flyout-buttons">
<button class="button button-outline" type="button">Cancel</button>
<button class="button" type="button">Ok</button>
</div>
</div>
<script>
document.addEventListener("click", (evt) => {
const flyoutEl = document.getElementById("flyout-example");
let targetEl = evt.target; // clicked element
do {
if(targetEl == flyoutEl) {
// This is a click inside, does nothing, just return.
document.getElementById("flyout-debug").textContent = "Clicked inside!";
return;
}
// Go up the DOM
targetEl = targetEl.parentNode;
} while (targetEl);
// This is a click outside.
document.getElementById("flyout-debug").textContent = "Clicked outside!";
});
</script>
</body>
</html>