Javascript 创建覆盖所有页面并捕获所有事件的div_Javascript_Events_Dom

Javascript 创建覆盖所有页面并捕获所有事件的div

javascript events dom

Javascript 创建覆盖所有页面并捕获所有事件的div,javascript,events,dom,Javascript,Events,Dom,我想要一个覆盖所有页面的div，我想要该div捕获所有事件（特别是触摸），然后如果页面中有按钮，则该按钮不得单击。我试过： background = document.createElement('div'); background.style = ` display:block; width:100%; height:100vh; p

我想要一个覆盖所有页面的div，我想要该div捕获所有事件（特别是触摸），然后如果页面中有按钮，则该按钮不得单击。我试过：

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

然后

background.addEventListener('touchend', (e)=>{e.stopPropagation();}, true);

但它不起作用。我的页面在cordova项目中

好的，我已经修复了，问题是在代码的其他部分中，我在div能够管理事件之前删除了div。

HTML:

这可能不是最优雅的答案，但我想到的第一件事是创建一个div来包装整个页面，然后将其z索引设置为一个非常高的数字，其高度为100%，宽度为100%

大概是这样的：

#overlay {
    width:100%;
    height:100%;
    z-index:1000;
}

<body>
<div id="overlay">

html content here!

</div>
</body>

<script>
$(document).on("click", "#overlay", function () {
    alert("overlay clicked")
});

#覆盖{
宽度：100%；
身高：100%；
z指数：1000；
}
html内容在这里！
$（文档）。在（“单击”，“覆盖”，函数（）{
警报（“单击覆盖”）
});

…aa到目前为止，您尝试了什么来实现这一点，您在哪里遇到了困难？我尝试了这个解决方案，但没有成功，我的页面是cordova项目的页面

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

#overlay {
    width:100%;
    height:100%;
    z-index:1000;
}

<body>
<div id="overlay">

html content here!

</div>
</body>

<script>
$(document).on("click", "#overlay", function () {
    alert("overlay clicked")
});