Source Code:
(back to article)
Submit
Result:
Report an issue
<!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", function(evt) { let flyoutEl = document.getElementById('flyout-example'), 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>