如何允许JS onclick使用指针事件：无；？

Question

I have a div over the whole page to close a dropdown menu when the big div is clicked. The thing is that I need pointer-events: none; because if I don't use it, the whole page gets blocked by the big div .

JS onclick won't work when I have pointer-events:none; So, I don't really 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 covering your whole page, put a click listener on the document, check to see if the clicked element is the menu or a child of the menu, if not then hide the menu

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> 

Answer 2

pointer-events: none means no events will come through. Instead, you should close the menu by listening to click/mousedown events on the entire document (and remove your div that is set to 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 so I got downvotes for my wrong answer.

But, according to your question, you want to cover the whole page with that div to block the click event but you still want to receive the click event then you can do like this actually:

1) Remove pointer-events:none; from that div and add the cursor :

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

2) Add the listener to your div like I previously mentioned and prevent 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';
     }
});