I have a div over the whole page to close a dropdown menu when the big divis 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>

I have a div over the whole page to close a dropdown menu when the big divis 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>

• javascript
• html
• css

• Is your big_div there for the sole purpose to close your menu? If so there is a simpler solution then cover your whole viewport with a div – Patrick Evans Commented Jan 22, 2016 at 20:53
• I don't think you can "allow JS onclick with pointer-events:none;". Actually that's the point of that property that you can't click it. – Mark E Commented Jan 22, 2016 at 20:53
• @PatrickEvans yea its there only for closing the menu. Whats the solution? – anonym Commented Jan 22, 2016 at 20:55
• I don't know how your dropdown is made but maybe you can try with focusout or attaching the onclick event to the body when opening the dropdown – Mark E Commented Jan 22, 2016 at 20:56
• 2 So... you're covering the page with an element you're specifically making unclickable, and you want to be able to read click events from it? I think the answer might just be "don't do that" – Daniel Beck Commented Jan 22, 2016 at 20:59

3 Answers 3

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>

pointer-events: none means no events will e 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';
  }  
});

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