title: How do I allow JS onclick with pointer-events:none;?
body: <p>I have a <code>div</code> over the whole page to close a dropdown menu when the big <code>div</code>is clicked. The thing is that I need <code>pointer-events: none;</code> because if I don't use it, the whole page gets blocked by the big <code>div</code>.</p>
  
  <p>JS <code>onclick</code> won't work when I have <code>pointer-events:none;</code> So, I don't really know how to solve this.</p>
  
  <pre><code> function test() {
              if (document.getElementById('div1').style.display == 'block') {
                 document.getElementById('div1').style.display = 'none';
             }
             else{
  
             }
  
              }
  
  #big_div{
      width: 100%;
      height: 100%;
      display: block;
      pointer-events:none;
  }
  
   &lt;div id="big_div" onclick="test()"&gt;&lt;/div&gt;
  </code></pre>