Html 如何使底层div无法点击？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1894717/
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 to make underlying div unclickable?
提问by Goran
I made overlay div with:
我用以下方法制作了叠加 div：
position: absolute; top: 0; left: 0; widht: 100%; height: 100%;
Basically I want this overlay div to cover my whole page. And it does what I need, but I also need underlying divs to be unclickable. They are indeed unclickable but only in FF, Safari and Chrome. in IE and Opera you can still click buttons that are underneath.
基本上我希望这个覆盖 div 覆盖我的整个页面。它可以满足我的需求，但我还需要底层 div 不可点击。它们确实无法点击，但仅适用于 FF、Safari 和 Chrome。在 IE 和 Opera 中，您仍然可以单击下方的按钮。
Does anyone have any idea on how can I achieve this "unclickable underlying behaviour"?
有没有人知道如何实现这种“无法点击的潜在行为”？
回答by Kadae
.class {pointer-events: none;}
回答by mfeingold
You also need to use z-index to ensure that your new div is on top of everything else. Without this attribute you are at the mercy of the browser in terms which one will be on top and receive the onclick
您还需要使用 z-index 来确保您的新 div 位于其他所有内容之上。如果没有此属性，您将受到浏览器的支配，即哪个将位于顶部并接收 onclick
Also be aware of a known IE (older versions) bug that input type selection ignores z-index
还要注意一个已知的 IE（旧版本）错误，即输入类型选择忽略 z-index
回答by Jarrett Meyer
If you're using something like jQuery, you can do something like
如果你使用像 jQuery 这样的东西，你可以做类似的事情
$("a:not(.overlay)").click(function(e) { e.preventDefault(); });
$("input:not(.overlay)").click(function(e) { e.attr("disabled", "disabled"); });
You'll give everything in your overlay (links, buttons, etc.) the overlay class, and this will effectively disable everything else on your page.
您将为覆盖层中的所有内容（链接、按钮等）提供覆盖层类，这将有效地禁用页面上的所有其他内容。
回答by Lasse Skindstad Ebert
This can easily be done using javascript:
这可以使用 javascript 轻松完成：
- Create a div masking the entire page with a high z-index
- Make the mask catch all clicks
- When removing the mask, the page becomes clickable again.
- 创建一个 div 用高 z-index 屏蔽整个页面
- 使面具捕捉所有点击
- 移除遮罩后，页面将再次变得可点击。
This approach can of course be used on all dom elements, not just the body.
这种方法当然可以用于所有 dom 元素，而不仅仅是主体。
var mask = $('<div></div>')
.css({
position: 'absolute',
width: '100%',
height: '100%',
top: 0,
left: 0,
'z-index': 10000
})
.appendTo(document.body)
.click(function(event){
event.preventDefault();
return false;
})
Working sample here: http://jsfiddle.net/GTPW3/3/
这里的工作示例：http: //jsfiddle.net/GTPW3/3/
回答by Nidhin Bose J.
Tthe overlay CSS with:
覆盖 CSS 与：
z-index: 10000;
will take care of it.
会照顾它。
回答by clorz
Add an onclick handler for the overlay div.
为覆盖层 div 添加一个 onclick 处理程序。
