title: How to create an event listener click to all window except one div
body: <p>I have a div that contains a dropdown with multiple checkboxes.</p>
  <p>I have these two event listeners:</p>
  <pre class="lang-js prettyprint-override"><code>widget.addEventListener(&quot;click&quot;, function (ev) { 
  
      if (checkboxes.style.display === &quot;none&quot;) {
          checkboxes.style.display = &quot;block&quot;; 
      } else {
          checkboxes.style.display = &quot;none&quot;; //hide the dropdown
      }
  
      ev.preventDefault(); 
      ev.stopPropagation();
  });
      
  window.addEventListener(&quot;click&quot;, function (ev) { 
  
      if (checkboxes.style.display === &quot;block&quot;) {
          checkboxes.style.display = &quot;none&quot;;
      }
  
      ev.preventDefault();
  
  });
  </code></pre>
  <p>These two work. When I click on the dropdown widget the dropdown opens and closes as expected.</p>
  <p>The second event also works. When I click anywhere on the window the dropdown if open closes. The thing is that this dropdown has checkboxes, so a checkbox is part of the window as well. As I click on a checkbox to check it the dropdown closes instead of giving the user the possibility to select one or more checkboxes and after closes.</p>
  <p>So the solution is definitely instead of window.addEventListener to do window(except dropdown div).addEventListener. I know the dropdown div id name so I can get it but what I don't know is how to create a event listener for that without the dropdown.</p>
  <p>PS: In the code the checkboxes are just the dropdown and widget is the dropdown widget icon.</p>