Javascript 如何允许JS onclick与指针事件：none；？

我在整个页面上都有一个

div

，当单击大

div

时，可以关闭一个下拉菜单。问题是我需要

指针事件：无div

阻塞

当我有

指针事件时，JS
onclick
将不起作用：无
 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>

功能测试（）{
if（document.getElementById（'div1'）.style.display=='block'）{
document.getElementById（'div1'）.style.display='none'；
}
否则{
}
}
#大分区{
宽度：100%；
身高：100%；
显示：块；
指针事件：无；
}
指针事件：无
表示不会发生任何事件。相反，您应该通过监听整个文档上的click/mousedown事件来关闭菜单（并删除设置为
指针事件：none
）的div）

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

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（“单击”），函数（e）{
var menu=document.getElementById（“myMenu”）；
var目标=e.target；
var openBtn=document.querySelector（“按钮”）；
如果（目标！==菜单&&！菜单.包含（目标）&&target！==openBtn）{
menu.style.display=“无”；
}
});
document.querySelector（“按钮”）.addEventListener（“单击”，函数）（）{
document.getElementById（“myMenu”）.style.display=“block”；
});
菜单{
宽度：120px；
高度：300px；
背景：#88DDFF；
显示：无；
}
某个项目
打开菜单
对不起，我没有仔细阅读你的问题，所以我的错误答案被否决了

但是，根据您的问题，您希望用
div
覆盖整个页面以阻止单击事件，但您仍然希望接收单击事件，然后您可以这样做：

1） 删除
指针事件：无div
添加
光标
：

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

2） 像我前面提到的那样，将侦听器添加到您的
div
，并防止从那里单击：

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

你的大餐是不是只为了关闭你的菜单？如果有一个更简单的解决方案，那么就用一个div覆盖整个视口。我不认为您可以“允许JS onclick with pointer events:none；”。实际上，这就是该属性的要点，您不能单击它。@PatrickEvans是的，它只用于关闭菜单。解决方案是什么？我不知道您的下拉列表是如何生成的，但是您可以尝试使用
focusout
或在打开下拉列表时将
onclick
事件附加到主体上。。。您正在使用一个元素覆盖页面，您专门将其设置为不可访问，并且希望能够从中读取单击事件？我认为答案可能只是“不要那样做”操作无法在菜单打开时直接点击背景元素，这是操作的要点！这个问题有点令人困惑。
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';
     }
});