如何让底层div不可点击？

发布于 2024-08-15 10:38:36 字数 261 浏览 10 评论 0原文

我制作了覆盖 div：

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

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

有谁知道如何实现这种“不可点击的底层行为”？

原文

I made overlay div with:

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.

Does anyone have any idea on how can I achieve this "unclickable underlying behaviour"?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

居里长安 2024-08-22 10:38:36

.class {pointer-events: none;}

.class {pointer-events: none;}

回复收藏 0 原文

枉心 2024-08-22 10:38:36

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

回复收藏 0 原文

各自安好 2024-08-22 10:38:36

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

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

回复收藏 0 原文

溺孤伤于心 2024-08-22 10:38:36

如果您使用的是 jQuery 之类的东西，您可以执行类似的操作，

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

您会将覆盖层中的所有内容（链接、按钮等）赋予覆盖层类，这将有效地禁用页面上的其他所有内容。

If you're using something like jQuery, you can do something like

$("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.

回复收藏 0 原文

吹梦到西洲 2024-08-22 10:38:36

使用 javascript 可以轻松完成此操作：

创建一个 div，用高 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/

This can easily be done using 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.

This approach can of course be used on all dom elements, not just the 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;
   })

Working sample here: http://jsfiddle.net/GTPW3/3/

回复收藏 0 原文