title: Pure JavaScript - Hide Div on Clicking outside
body: <p>I want when i click outside the <strong>My DIV</strong> with the ID <code>Container_ID</code> , all the Container gets hidden through <code>display: none;</code>. The code that i present in <strong>JavaScript</strong> works to a certain point, because when i click inside any part of the <code>Container_ID</code> it returns the same behavior, the <strong>My DIV</strong> hides. And it wasn't supposed when i'm interacting with elements <code>Controls_CLASS</code> + <code>ul,li</code> + <code>Checkbox_CLASS</code> inside the <code>Container_ID</code> itself. They should be excluded from hiding the entire <code>Container_ID</code> when i click on them, because they are inside.</p>
  <p>How can I improve this?</p>
  <p><strong>JavaScript</strong> (font: <a href="https://codepen.io/marizawi/pen/YgaaMp" rel="nofollow noreferrer">https://codepen.io/marizawi/pen/YgaaMp</a>)</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>window.addEventListener('mouseup', function(event) {
    var cont = document.getElementById('Container_ID');
    if (event.target != cont &amp;&amp; event.target.parentNode != cont) {
      cont.style.display = 'none';
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div.Container_CLASS {
    width: 50%;
    height: 350px;
    margin-top: 4px;
    margin-left: 4px;
    display: block;
    position: absolute;
    overflow-y: scroll;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="Container_CLASS" id="Container_ID"&gt;
    &lt;div class="Controls_CLASS"&gt;&lt;a href="#"&gt;Select All&lt;/a&gt;|&lt;a href="#"&gt;Reset&lt;/a&gt;&lt;/div&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="BMW" /&gt;BMW&lt;/li&gt;
      &lt;li&gt;&lt;input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="Mercedes" /&gt;Mercedes&lt;/li&gt;
      &lt;li&gt;&lt;input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="Volvo" /&gt;Volvo&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>