如何使用指针事件允许JS onclick:none;？

Question

div当div点击大页面时,我在整个页面上关闭了一个下拉菜单.我需要的pointer-events: none;是因为如果我不使用它,那么整个页面就会受到大的阻碍div.

onclick当我拥有JS 时,JS 将不起作用pointer-events:none;所以,我真的不知道如何解决这个问题.

 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

不要使用覆盖整个页面的 div，在文档上放置一个单击侦听器，检查单击的元素是菜单还是菜单的子项，如果不是，则隐藏菜单

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

演示

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

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