如何使底层 div 不可点击？答案

【问题标题】：How to make underlying div unclickable?如何使底层 div 不可点击？
【发布时间】：2009-12-12 21:14:44
【问题描述】：

我使用以下方法制作了覆盖 div：

position: absolute; top: 0; left: 0; widht: 100%; height: 100%;

基本上我希望这个覆盖 div 覆盖我的整个页面。它可以满足我的需要，但我还需要底层 div 不可点击。它们确实不可点击，但仅在 FF、Safari 和 Chrome 中。在 IE 和 Opera 中，您仍然可以单击下方的按钮。

有人知道如何实现这种“不可点击的潜在行为”吗？

【问题讨论】：

标签： css html overlay clickable

【解决方案1】：

.class {pointer-events: none;}

【讨论】：

这在 caniuse.com/#feat=pointer-events)

【解决方案2】：

为覆盖 div 添加一个 onclick 处理程序。

【讨论】：

【解决方案3】：

您还需要使用 z-index 来确保您的新 div 位于其他所有内容之上。如果没有此属性，您将受到浏览器的支配，即哪个浏览器将位于顶部并接收 onclick

还要注意一个已知的 IE（旧版本）错误，即输入类型选择会忽略 z-index

【讨论】：

【解决方案4】：

如果你使用 jQuery 之类的东西，你可以做类似的事情

$("a:not(.overlay)").click(function(e) { e.preventDefault(); });
$("input:not(.overlay)").click(function(e) { e.attr("disabled", "disabled"); });

您将为叠加层中的所有内容（链接、按钮等）提供叠加层类，这将有效地禁用页面上的所有其他内容。

【讨论】：

【解决方案5】：

这可以使用 javascript 轻松完成：

创建一个 div，用高 z-index 屏蔽整个页面
让面具吸引所有点击
移除遮罩后，页面再次变为可点击。

这种方法当然可以用于所有 dom 元素，而不仅仅是 body。

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

此处的工作示例：http://jsfiddle.net/GTPW3/3/

【讨论】：

【解决方案6】：

覆盖CSS：

z-index: 10000;

会处理的。

【讨论】：