Javascript 当用户单击除元素本身以外的任何对象时隐藏元素

我想在用户单击对话框等其他东西时删除下拉列表

编辑此代码：

函数显示（）{
document.querySelector（'.box'）.classList.toggle（'show'）；
}

*{
填充：0；
保证金：0；
框大小：边框框；
}
.盒子{
高度：35px；
宽度：90px；
高度：90px；
背景：#000；
过渡：0.35秒全三次贝塞尔（0.5,0.49,0,0.98）；
颜色：红色；
显示：无；
}
.box.show{
显示：块；
}
p{
边框底部：1px虚线#000；
显示：内联块；
边缘底部：10px；
光标：指针；
}

单击我

---

如果在窗口中添加一个事件侦听器以检测单击，该怎么办？然后只要做你的事情，如果点击不在框内

window.addEventListener('click', function(e){   
  if (document.querySelector('.box').contains(e.target)){
    // Clicked in box
  } else{
    // Clicked outside the box
  }
});

像这样

var-box=document.querySelector（'.box'）；
var opener=document.querySelector（'p'）；
函数show（）{
box.classList.toggle（'show'）；
}
文档.添加的列表器（“单击”，函数（e）{
如果（！box.contains（e.target）&&e.target！=开瓶器）{
box.classList.toggle（'show'）；
}
})

*{
填充：0；
保证金：0；
框大小：边框框；
}
.盒子{
高度：35px；
宽度：90px；
高度：90px；
背景：#000；
过渡：0.35秒全三次贝塞尔（0.5,0.49,0,0.98）；
颜色：红色；
显示：无；
}
.box.show{
显示：块；
}
p{
边框底部：1px虚线#000；
显示：内联块；
边缘底部：10px；
光标：指针；
}

单击我

有两种方法

将事件侦听器添加到主体中，并使用if和else块

document.body.addEventListener('click', function(event) {
 if (!event.target.classList.contains('box')) {
     event.target.classList.toggle('show')
 }

}))

2。将事件侦听器添加到其他每个元素中

// get all elements except those with class box
const elements = document.querySelectorAll('body *:not(.box)');
for(i=0 ; i < elements.length; i++){
  elements[i].addEventListener('click', function(event){

});
}

//获取除带有类框的元素以外的所有元素
const elements=document.queryselectoral（'body*：not（.box）'）；
对于（i=0；i谢谢你，谢谢你。MIJ3AS，如果它解决了你的问题，请考虑接受：