Question

我制作了叠加div：

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

基本上我希望这个叠加div覆盖我的整个页面。它做了我需要的，但我也需要底层的div是不可点击的。它们确实无法点击，但仅限于FF，Safari和Chrome。在IE和Opera中，你仍然可以点击下面的按钮。

有没有人知道如何实现这种“无法解决的潜在行为”？

Answer 1

.class {pointer-events: none;}

Answer 2

为叠加div添加onclick处理程序。

Answer 3

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

还要注意输入类型选择忽略z-index

的已知IE（旧版本）错误

Answer 4

如果您正在使用类似jQuery的东西，您可以执行类似

的操作

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

您可以在叠加层（链接，按钮等）中提供叠加层的所有内容，这将有效地禁用网页上的所有内容。

Answer 5

覆盖CSS：

z-index: 10000;

会照顾它。

Answer 6

这可以使用javascript轻松完成：

使用高z-index
让面具抓住所有点击
删除蒙版时，页面再次变为可点击状态。

这种方法当然可以用于所有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;
   })

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

如何让底层div无法点击？

6 个答案: