Question

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

<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');
   }
});

Answer 2

你可以这样做

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);

Answer 3

这样的事情：

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

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

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

Answer 4

＆＃13;

function closest(e, t){ 
  return !e? false : e === t ? true : closest(e.parentNode, t);
}

container = document.getElementById("popup");
open = document.getElementById("open");

open.addEventListener("click", function(e) {
  container.style.display = "block";
  open.disabled = true;
  e.stopPropagation();
});

document.body.addEventListener("click", function(e) {
    if (!closest(e.target, container)) {
        container.style.display = "none";
        open.disabled = false;
    }
});

＆＃13;

#popup {
  border: 1px solid #ccc;
  padding: 5px;
  display: none;
  width: 200px;
}

＆＃13;

<div id="container">
  <button id="open">open</button>
  <div id="popup">PopUp</div>
</div>

＆＃13;

Javascript - 如何点击页面上的任意位置来隐藏已打开的div

4 个答案: