用Javascript隐藏div

当用户单击id为“main”的div之外的任何位置时，我试图隐藏一个div

我使用的是香草Javascript，不想使用jQuery

我的代码运行得很好，但是每当用户在sub-child div或任何文本中单击时，它也会隐藏div，这不是我想要的行为

window.addEventListener（'mouseup'，函数（事件）{
var-box=document.getElementById（'main'）；
if（event.target！=box&&event.target.parentNode！=box）{
box.style.display='none'；
}
});

单击此处时不应隐藏

单击此处时不应隐藏
单击此处时不应隐藏
单击此处时不应隐藏
单击此处时不应隐藏

单击此处时不应隐藏

什么时候点击这里应该隐藏

什么时候点击这里应该隐藏

当单击此处应隐藏时
，您可以在主div上添加单独的侦听器以停止该事件的传播：

window.addEventListener('click', function(event){
    var box = document.getElementById('main');
    box.style.display = 'none';
});

var box = document.getElementById('main');
box.addEventListener('click', function(event) {
    event.stopPropagation();
});

小提琴：

这是一个答案，但那个答案使用jQuery。
嗨，希望我正确理解了你的问题


当你点击绿色和透明的线条，你想隐藏一切？还是仅仅是div“main”


当前您的javascript正在添加事件侦听器“mouseup”。事件侦听器的函数有一个if语句，用于检查是否以“main”div为目标。单击时要激活该函数的元素不在main div中。DOM树组织不正确

我已经冒昧地将您的代码稍微调整到我认为您想要实现的程度。。。这是一把小提琴


您还可以将事件侦听器和getElementById与以下代码行组合：

document.getElementById（'clickToHide'）.addEventListener（'mouseup'，函数（事件）{

这可能是一种更简单的方法，可以确保您指向正确的div。如果我找错了方向，请告诉我。
帖子说他希望它响应主div之外的单击。对不起，亲爱的，但我的DOM树组织正确！正如jaredsk所回答的，我也希望如此。当用户单击sid之外的任何位置时主分区的e。它应该只隐藏主分区，而不是所有分区。但无论如何，不用担心！祝你好运！Guy只有一个问题，我可以在下拉菜单代码中使用它？在导航内？所以当用户单击下拉菜单“li”外的任何位置时下拉菜单将关闭自动？对吗？我再一次想知道，当用户每次点击页面时触发窗口事件监听器是否会更沉重？当只有div main是block时，没有任何选项，那么只有javascript windows监听器会被激活吗？我不确定我是否理解。代码应该适用于导航栏。在这种情况下，您可能需要添加当导航栏打开时使用事件侦听器，然后在导航栏关闭时将其删除。这样，当导航栏未打开时，您就不会监听站点上的每一次单击。（另外，如果我的回答有帮助，请将其标记为已接受，谢谢！）