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

我有一个javascript可以打开一个隐藏的div：

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

函数下拉列表（）
{document.getElementById（“login_dropdown”）.style.display=“block”}

html是：

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

东西

CSS是：

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

#登录\u下拉列表{
宽度：150px；
显示：无；
}

仅使用javascript，当我单击页面上的任何其他位置时，如何隐藏此div，而不包括打开的div本身。

您可以这样做

var elem = document.getElementById("login_dropdown");
(document.body || document.documentElement).addEventListener('click', function (event) {
  // If the element on which the click event occurs is not the dropdown, then hide it
  if (event.target !== elem)
    elem.style.display="none";
}, false);

你可以这样做

var elem = document.getElementById("login_dropdown");
(document.body || document.documentElement).addEventListener('click', function (event) {
  // If the element on which the click event occurs is not the dropdown, then hide it
  if (event.target !== elem)
    elem.style.display="none";
}, false);

大概是这样的：

$("document").mouseup(function(e)
  {
    var subject = $("#login_dropdown");

    if(e.target.id != subject.attr('id'))
    {
        subject.css('display', 'none');
    }
});

像这样工作。当您单击页面上的任意位置时，处理程序将激发并比较打开选项卡的ID与文档的ID（没有），从而关闭选项卡。但是，如果单击该选项卡，处理程序将激发、检查ID、查看目标是否相同并通过测试（因此不会关闭该选项卡）。

类似于以下内容：

$("document").mouseup(function(e)
  {
    var subject = $("#login_dropdown");

    if(e.target.id != subject.attr('id'))
    {
        subject.css('display', 'none');
    }
});

---

像这样工作。当您单击页面上的任意位置时，处理程序将激发并比较打开选项卡的ID与文档的ID（没有），从而关闭选项卡。但是，如果您单击该选项卡，处理程序将激发、检查ID、看到目标相同并且测试失败（因此不会关闭该选项卡）。

vanilljs类似于此

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

---

vanilljs就是这样

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

函数最近的（e，t）{ return！e？false:e==t？true：最近（e.parentNode，t）； } 容器=document.getElementById（“弹出窗口”）； open=document.getElementById（“open”）； 打开.addEventListener（“单击”，函数（e）{ container.style.display=“block”； open.disabled=true； e、 停止传播（）； }); document.body.addEventListener（“单击”，函数（e）{ 如果（！最近（如目标、容器））{ container.style.display=“无”； open.disabled=false； } });

#弹出窗口{
边框：1px实心#ccc；
填充物：5px；
显示：无；
宽度：200px；
}

打开
弹出窗口

函数最近的（e，t）{ return！e？false:e==t？true：最近（e.parentNode，t）； } 容器=document.getElementById（“弹出窗口”）； open=document.getElementById（“open”）； 打开.addEventListener（“单击”，函数（e）{ container.style.display=“block”； open.disabled=true； e、 停止传播（）； }); document.body.addEventListener（“单击”，函数（e）{ 如果（！最近（如目标、容器））{ container.style.display=“无”； open.disabled=false； } });

#弹出窗口{
边框：1px实心#ccc；
填充物：5px；
显示：无；
宽度：200px；
}

打开
弹出窗口

您可以在body元素上设置一个click处理程序来处理页面iirc上的所有单击。然后你只需要处理程序来隐藏元素。有人能在jFiddle上告诉我吗？你可以在body元素上设置一个click处理程序来处理页面iirc上的所有点击。然后你只需要处理程序来隐藏元素。有人能在JFIDLE上给我看一下吗？我需要严格的javascript。我需要严格的javascript。我会把这段代码放在：function dropdown（）{…}我是JavaScription新手，子元素呢？如果单击容器中的某个元素，整个内容都将被隐藏。在作为

的最后一个子元素放置的脚本中，因为它查询

#login_下拉列表

，因此如果将其放置在

head

标记中，当执行

document.getElementById（“login_下拉列表”）

时，DOM树还没有在

主体

中附加这些元素，因此它将返回

未定义的

我是否将此代码放在：function dropdown（）{…}我是Javascript新手，那么子元素呢？如果单击容器中的某个元素，整个内容都将被隐藏。在作为

的最后一个子元素放置的脚本中，因为它查询

#login_下拉列表

，因此如果将其放置在

head

标记中，当执行

document.getElementById（“login_下拉列表”）

时，DOM树尚未附加

主体中的那些元素，因此它将返回
未定义的