Question

我在整个页面上有div，以便在点击大div时关闭下拉菜单。问题是我需要pointer-events: none;，因为如果我不使用它，整个页面会被大div阻止。

当我onclick时，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;
    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表示不会发生任何事件。相反，您应该通过收听整个文档上的click / mousedown事件来关闭菜单（并删除设置为pointer-events: none的div。）

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

对不起，我没有仔细阅读你的问题，所以我得到了错误回答。

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

1）从pointer-events:none;移除div并添加cursor：

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

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

3 个答案: