Question

我想要一个覆盖所有页面的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可以管理事件。

Answer 1

https://jsfiddle.net/bv2oLrcs/

HTML：

<div id="myDiv"></div>
<button>Click me if you can!</button>

CSS：

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

Answer 2

这可能不是最优雅的答案，但我头脑中的第一件事是创建一个包裹整个页面的div，然后将其z-index设置为一个非常高的数字，其高度为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")
});

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

2 个答案: