Javascript 如果单击外部选择器，则触发事件

我试图点击按钮以外的其他地方，隐藏元素，但我不明白，我不知道怎么做

$（函数（）{
$（文档）。在（'click'，'#foo'，函数（）上{
设div=$（'#bar'）；
if（div.css（'display'）='none'）{
div.show（）；
}
否则{
隐藏分区（）；
}
});
})

#foo{
最小宽度：35%；
}
#酒吧{
最大宽度：35%；
最小高度：100px；
背景色：aliceblue；
边框：1px纯蓝色；
边界半径：5px；
}

切换

不需要jQuery，只需测试

.closest（“#bar”）

是否存在：

const bar=document.querySelector（“#bar”）；
让隐藏=虚假；
document.body.addEventListener（'click'，（e）=>{
if（例如，目标最近（'#foo'））{
log（'单击内部，返回'）；
回来
}
log（'clicked out'）；
bar.style.display=隐藏？'block'：'none'；
隐藏=！隐藏；
});
正文{
高度：200px；
}
#福{
最小宽度：35%；
}
#酒吧{
最大宽度：35%；
最小高度：100px；
背景色：aliceblue；
边框：1px纯蓝色；
边界半径：5px；
}
切换
这是最简单的方法


$（文档）。在（“单击”，函数（）上）{
如果（event.target.id='foo'）{
//如果单击了#foo，则不执行任何操作
}
否则{
//如果未单击该按钮
$（'#bar'）.hide（）；
}
});
#foo{
最小宽度：35%；
}
#酒吧{
最大宽度：35%；
最小高度：100px；
背景色：aliceblue；
边框：1px纯蓝色；
边界半径：5px；
}

切换


我认为使用聚焦和模糊功能更好

我是这样做的

<button id="test">
  Hello
</button>

<div class="blue-container" tabindex="1">

</div>

您可能必须使用冒泡到父节点的事件


$（函数（）{
$（'foo'）。在（'click'，函数（e）上{
e、 停止传播（）；
e、 预防默认值（）；
$（'#bar'）。切换（）；
log（'toggle…bar'）；
});
$（文档）。在（'单击'）上，函数（e）{
e、 停止传播（）；
e、 预防默认值（）；
$（'#bar'）.hide（）；
log（'hide…bar'）；
});
})
#foo{
最小宽度：35%；
}
#酒吧{
最大宽度：35%；
最小高度：100px；
背景色：aliceblue；
边框：1px纯蓝色；
边界半径：5px；
}

切换



$('#test').focus(function () {
    $('.blue-container').show().focus();
});

$('.blue-container').blur(function () {
    $('.blue-container').hide();
});