I’m currently trying to close an element when its style is different than “display = none”. I’m having an error in the console telling me that lists. some aren’t a function so I may not have understood well the “some” method.
More Infos on what I want : Given that I have 3 lists (in lists), when I click outside of it or its elements I want to close all the lists)
Thanks in advance
const lists = document.querySelectorAll(".list"); function closeList() { document.addEventListener("click", () => { if(lists.some((list) => list.style.display != "none")) { return lists.style.display = none; } else return; }); };
Advertisement
Answer
You can use Node.contains() to check if Event.target is a descendant of element and run callback if not:
function onClickOutside(ele, cb) { document.addEventListener('click', event => { if (!ele.contains(event.target)) cb(); }); }; // Using onClickOutside('#list', () => console.log('Hi!')); // Will log 'Hi!' whenever the user clicks outside of #list