CODEWITHSUNDEEP
javascripthtmlcss
anonym
anonym

Reputation: 145

How do I allow JS onclick with pointer-events:none;?

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>

Upvotes: 8

Views: 13590

Answers (3)

Shashank Agrawal
Shashank Agrawal

Reputation: 25797

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

Upvotes: 1

Patrick Evans
Patrick Evans

Reputation: 42736

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>

Upvotes: 8

Ruan Mendes
Ruan Mendes

Reputation: 92274

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

Upvotes: 2

Related Questions