[英]How to close an element by clicking outside of it?
I'm currently trying to close an element when its style is different than "display = none".当元素的样式不同于“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.
some 不是函数,所以我可能不太了解“some”方法。
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)关于我想要的更多信息:鉴于我有 3 个列表(在列表中),当我点击它或其元素之外时,我想关闭所有列表)
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;
});
};
You can use Node.contains() to check if Event.target is a descendant of element and run callback if not:您可以使用Node.contains()检查Event.target是否是元素的后代,如果不是则运行回调:
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
I suggest for you this method :我建议你这个方法:
@HostListener('document:click', ['$event.target'])
public onClick(targetElement) {
const event = this.elementRef.nativeElement.contains(targetElement);
if (targetElement && !event) {
if (this.isClickedOutside) {
// this.shownInfo = false;
}
}
or you can also just a javascript :或者你也可以只是一个 javascript :
window.addEventListener('click', function(e){
if (document.getElementById('clickbox').contains(e.target)){
// Clicked in box
} else{
// Clicked outside the box
}
});
Js querySelectorAll() will return a nodeList, but nodeList doesn't have method some(). js querySelectorAll()会返回一个nodeList,但是nodeList没有some()方法。 You can use forEach() the following:
您可以使用 forEach() 以下内容:
const lists = document.querySelectorAll(".list");
function closeList() {
document.addEventListener("click", () => {
lists.forEach(list => {
if(list.style.display != "none") lists.style.display = none
})
});
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.