javascript - Create a div that overlay all page and captures all events -

this question has answer here:

• html “overlay” allows clicks fall through elements behind [duplicate] 9 answers
• html/css: make div “invisible” clicks? 4 answers

i want div overlay page , want div captures events (in particular touch) if button in page button must not clickable. tried with:

background = document.createelement('div');                 background.style = `                 display:block;                 width:100%;                 height:100vh;                 position:fixed;                 top:0px;                 left:0px;                 z-index:9;                 background-color:black;                 opacity:0.3;`;                 document.body.appendchild(background); 

and

background.addeventlistener('touchend', (e)=>{e.stoppropagation();}, true); 

but doesn't work. page in cordova project.

ok i've fixed, problem in other portion of code deleted div before div manage events.

https://jsfiddle.net/bv2olrcs/

html:

<div id="mydiv"></div> <button>click me if can!</button> 

css:

* {   margin: 0;   padding: 0; } #mydiv{   width: 100%;   height: 100%;   border: 1px solid black;   position: fixed; }