Javascript——如何点击页面任意位置隐藏打开的div

Question

我有一个打开隐藏 div 的 javascript:

<script>
function dropdown() 
{ document.getElementById("login_dropdown").style.display="block"; }
</script>

html 是:

<div onclick="dropdown()">
<div id="login_dropdown">STUFF</div>
</div>

CSS 是:

<style>
#login_dropdown {
width: 150px;
display:none;
}</style>

单独使用 javascript，当我点击页面上的其他任何地方时如何隐藏此 div，不包括打开的 DIV 本身。

Answer 1

像这样的 vanilljs

document.addEventListener('click', function(event){
   const yourContainer = document.querySelector('....');
   if(!yourContainer.contains(event.target)) {
      //hide things classes.. yourContainer.classList.add('hidden');
   }
});