javascript 如何防止点击windows phone中透明覆盖div下的元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8641313/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can prevent the click on elements which under the transparent overlay div in windows phone?
提问by Ajith Kumar P V
Am developing a mobile web application using html and javascript.I have a task to develop loading overlay in this application and I have made a transparent div as overlay ,while it po-up need to prevent the click on the elements which is under the transparent div.But only in windows mobile phones (IE browser) it's possible me to click the underlying elements.How I can prevent this? given below the css I have applied for it
我正在使用 html 和 javascript 开发一个移动网络应用程序。我有一个任务来开发这个应用程序中的加载覆盖，我已经制作了一个透明的 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;
}
回答by JohnnyCoder
I found this question here first, but I found another SO post that had a CSS-only solution that worked for me here.
我在这里发现了这个问题，第一，但我发现了另一个SO职位，有这样的工作对我来说是唯一的CSS的解决方案在这里。
The gist of the CSS is as follows:
CSS 的要点如下：
.overlay {
height: 0px;
overflow: visible;
pointer-events: none;
background:none !important;
}
In my case, I had text as well, and I didn't want users to be able to select it, so added the following (see user-select hereand 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 */
}
回答by Dlinny
Add onclickattribure to overlaypage block. Like:
将onclick属性添加到 overlaypage 块。喜欢：
<div class="overlaypage" onclick="return false;"></div>
