Question

使用html和javascript开发移动Web应用程序。我有一个任务是在这个应用程序中开发加载叠加层，我已经将透明div作为叠加层，而它需要防止点击元素，这是在透明div下。但只有在Windows手机（IE浏览器）中，我才可能点击底层元素。我怎么能阻止这个？在我申请的css下面给出

.overlaypage {
top: 0px;
opacity: .5;
background: black;
position: absolute;
height: 100%;
width: 100%;
pointer-events: visible;
display: block;
z-index: 1001;
}

Answer 1

将 onclick 属性添加到叠加图像块。像：

<div class="overlaypage" onclick="return false;"></div>

Answer 2

我首先在这里找到了这个问题，但是我找到了另一个SO帖子，它有一个仅适用于CSS的解决方案here。

CSS的要点如下：

.overlay {
  height: 0px;
  overflow: visible;
  pointer-events: none;
  background:none !important;
}

在我的情况下，我也有文字，我也不希望用户能够选择它，因此添加了以下内容（请参阅用户选择here和here）：

.overlay {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */    
}

Answer 3

只需使用 z-index 来操作元素。

更多访问：Disable Clicks on Div Overlay, But Allow Children Clicks

如何防止点击windows phone中透明叠加div下的元素？

3 个答案: