How to enable JS onclick with event pointers: none ;?

Question

I have divan entire page to close the drop-down menu when I click big div. The fact is that I need it pointer-events: none;, because if I do not use it, the whole page is blocked large div.

JS onclickwill not work if I have it. pointer-events:none;So, I really don't know how to solve this.

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

 <div id="big_div" onclick="test()"></div>

Answer 1

Instead of using a div that spans your entire page, place the click recipient in the document, check to see if the menu item or child menu item is clicked, if you don't hide the menu then

document.addEventListener("click",function(e){
    var menu = document.getElementById("myMenu");   
    var target = e.target;
    if(target !== menu && !menu.contains(target)){
       menu.style.display = "none";
    }
});

Demo

document.addEventListener("click",function(e){
    var menu = document.getElementById("myMenu");   
    var target = e.target;
    var openBtn = document.querySelector("button");
  
    if(target !== menu && !menu.contains(target) && target !== openBtn){
       menu.style.display = "none";
    }
});

document.querySelector("button").addEventListener("click",function(){
  document.getElementById("myMenu").style.display = "block";
});

menu {
  width:120px;
  height:300px;
  background:#88DDFF;
  display:none;
}

<menu id="myMenu"><span>some item</span></menu>

<button>Open menu</button>

Run codeHide result

Answer 2

pointer-events: none , . , click/mousedown ( div, pointer-events: none).

document.addEventListener('mousedown', function(e) {
  // You may need a better check involving e.target because
  // you won't want to close the menu when clicking inside the menu
  // or on the button (if the menu is not open)
  if (!e.target.contains(menuNode)) {
       document.getElementById('div1').style.display = 'none';
  }  
});

Answer 3

Sorry, I didn’t read your question carefully to get the wrong answer.

But, according to your question, you want to cover the whole page with divblocking the click event, but you still want to get the click event, then you can actually do this:

1) Remove pointer-events:none;from this divand add cursor:

#big_div {
    width: 100%;
    height: 100%;
    display: block;
    cursor: none;
}

2) Add a listener to yours div, as I mentioned, and don't let the click from there:

document.getElementById("big_div").addEventListener("click", function(e) {
     e.preventDefault();
     // Do whatever you want to do
     if (document.getElementById('div1').style.display == 'block') {
         document.getElementById('div1').style.display = 'none';
     }
});