Menu
I've been reading the following:
https://css-tricks.com/dangers-stopping-event-propagation/
I want to implement this in a proper and safe way.
I would like to when I click outside the div with class container that the console.log is to trigger. Whenever I click inside or on the div with the class container for it to not trigger.
Now. I could fix this on my own, however it feels like there is probably a smart solution to be able to do this no matter how many elements are inside the container div, or even how nested it may become.
The code below works for when I click on the actual div with the class container, but not when I click on one of the elements (i.e. button) inside of the container div.
js:
document.addEventListener('click', function (event.target) {
if(document.getElementsByClassName('container')[0] !== event.target){
console.log('clicking outside the div');
}
});
html:
<div class="container">
<div>
<button>
I will be clicking here!
</button>
<div>
</div>
There must be a good practice approach to this, the following top rated answer How do I detect a click outside an element? has spooked me when looking for an answer in other questions, I'd rather ask for a proper one instead.
No jQuery please!
372
I'd like to detect a click inside or outside a div area. The tricky part is that the div will contain other elements and if one of the elements inside the div is clicked, it should be considered a click inside, the same way if an element from outside the div is clicked, it should be considered an outside click.
So, for detecting a click outside an element, it would be best if you add a listener to the whole document element. Consequently, the main loop will go up the DOM from the clicked target element to search if the ancestor of that element belongs to the flyout container. The fancy ES6 features offer the following JavaScript code to use:
Using Node.contains would be a useful way to check whether the target element is within the div that is being checked. window.addEventListener ('click', function (e) { if (document.getElementById ('clickbox').contains (e.target)) { // Clicked in box } else { // Clicked outside the box } });
Outside click detection is useful in various UI elements such as popups, dropdowns, and menus. Web developers often tend to integrate libraries for even simple things that they can implement themselves. Adding excessive dependencies can slow down your web app, make your bundle size heavy, and make your codebase less maintainable.
You're on the right way and only need one little change inside your code. Instead of only checking if the event.target is the same as the div, also check if the div contains the event target:
var container = document.getElementsByClassName('container')[0];
document.addEventListener('click', function( event ) {
if (container !== event.target && !container.contains(event.target)) {
console.log('clicking outside the div');
}
});
If for some reason HTMLnode.contains() is not supported (safari, im looking at you), you can use following snippet to check if an element contains another:
function childOf( node, ancestor ) {
var child = node;
while (child !== null) {
if (child === ancestor) return true;
child = child.parentNode;
}
return false;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
