javascript - 纯 JavaScript - 点击外部时隐藏 Div

Question

当我点击 外部时，我想要我的DIV ID 为 Container_ID ，所有 Container 都通过 display: none; 隐藏.我在 中提供的代码JavaScript 工作到一定程度，因为当我点击 Container_ID 的任何部分时它返回相同的行为，我的DIV 隐藏。当我与元素交互时，它是不应该的Controls_CLASS + ul,li + Checkbox_CLASS里面Container_ID本身。他们应该被排除在隐藏整个 Container_ID 之外。当我点击它们时，因为它们在里面。
我该如何改进呢？
JavaScript (字体:https://codepen.io/marizawi/pen/YgaaMp)

window.addEventListener('mouseup', function(event) {
  var cont = document.getElementById('Container_ID');
  if (event.target != cont && event.target.parentNode != cont) {
    cont.style.display = 'none';
  }
});

div.Container_CLASS {
  width: 50%;
  height: 350px;
  margin-top: 4px;
  margin-left: 4px;
  display: block;
  position: absolute;
  overflow-y: scroll;
}

<div class="Container_CLASS" id="Container_ID">
  <div class="Controls_CLASS"><a href="#">Select All</a>|<a href="#">Reset</a></div>
  <ul>
    <li><input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="BMW" />BMW</li>
    <li><input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="Mercedes" />Mercedes</li>
    <li><input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="Volvo" />Volvo</li>
  </ul>
</div>

Answer 1

这项工作。
使用 closest检查单击的 outsde div 的方法。

closest
一个元素的祖先是:parent、parent的parent、它的parent等等。祖先一起形成了从元素到顶部的父链。
方法elem.closest(css)寻找与 CSS 选择器匹配的最近的祖先。 elem本身也包含在搜索中。
换句话说，方法closest从元素上升并检查每个 parent 。如果它与选择器匹配，则搜索停止，并返回祖先。

如果 div有 id

 window.addEventListener('mouseup',function(event){
        var pol = document.getElementById('pol');
        if(!(event.target.closest("#pol"))){
            pol.style.display = 'none';
        }
  });  

h2{margin:0 0 10px}
#pol{
    width:400px;
    height:300px;
    background:#999;
    text-align:center;
    display:none;
    margin-top:0;
    margin:10px;
}

<h2>Click outside div will be hide. Click Button div will be display</h2>
<button onClick="document.getElementById('pol').style.display='block'">Show</button>
<div id="pol">
I am Tanmoy Biswas
  <p>ksjdhfksjdhfkjshdfkjsdfsf</p>
<div class="Controls_CLASS"><a href="#">Select All</a>|<a href="#">Reset</a></div>
  <ul>
    <li><input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="BMW" />BMW</li>
    <li><input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="Mercedes" />Mercedes</li>
    <li><input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="Volvo" />Volvo</li>
  </ul>
</div>

如果 div有 class :

 

    window.addEventListener("mouseup", function (event) {
  let pol = document.querySelectorAll(".pol");
  pol.forEach((myDiv) => {
    if (!(event.target.closest(".pol"))) {
      myDiv.style.display = "none";
    }
  });
});

h2{margin:0 0 10px}
.pol{
    width:400px;
    height:300px;
    background:#999;
    text-align:center;
    display:none;
    margin-top:0;
    margin:10px;
}

<h2>Click outside div will be hide. Click Button div will be display</h2>
<button onClick="document.getElementById('a').style.display='block'">Show</button>
<div id="a" class="pol">
I am Tanmoy Biswas
  <p>ksjdhfksjdhfkjshdfkjsdfsf</p>
<div class="Controls_CLASS"><a href="#">Select All</a>|<a href="#">Reset</a></div>
  <ul>
    <li><input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="BMW" />BMW</li>
    <li><input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="Mercedes" />Mercedes</li>
    <li><input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="Volvo" />Volvo</li>
  </ul>
</div>


<h2>Click outside div will be hide. Click Button div will be display</h2>
<button onClick="document.getElementById('b').style.display='block'">Show</button>
<div id="b" class="pol">
I am Tanmoy Biswas
  <p>ksjdhfksjdhfkjshdfkjsdfsf</p>
<div class="Controls_CLASS"><a href="#">Select All</a>|<a href="#">Reset</a></div>
  <ul>
    <li><input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="BMW" />BMW</li>
    <li><input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="Mercedes" />Mercedes</li>
    <li><input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="Volvo" />Volvo</li>
  </ul>
</div>