仅可见 DIV [重复]答案

【问题标题】：Only visible DIV [duplicate]仅可见 DIV [重复]
【发布时间】：2012-08-29 13:08:06
【问题描述】：

可能重复：
How to disable all div content

是否可以只显示 div 但不能点击其中的任何内容？像“阻塞”的div？因为我在这个 div 中有按钮、选择和一些信息，所以我只想让它可见但不工作。

【问题讨论】：

复制stackoverflow.com/questions/639815/…

【解决方案1】：

您可以在整个窗口上添加一个透明的 div。

$('body').append($('<div style="opacity:0; z-index:10; position:fixed; top:0; left:0; right:0; bottom:0">'));

小提琴演示：http://jsfiddle.net/HeNwE/

【讨论】：

为什么这被否决了？
在网页上有看似活跃但不可点击的元素会让用户感到困惑和糟糕的设计。
@Endy 这是问题的答案。我看到了一个很好的用例：当您在所有内容上添加一个对话框时（当我这样做时，我使用一个灰色的不完全透明的 div 使其更清晰）。
查看问题评论中发布的答案，然后决定您认为哪种方法更好。

【解决方案2】：

在目标 div 中添加一个透明 div，覆盖整个内容。这是一个演示：http://jsfiddle.net/TkTx6/2/

html：

<div>
    <div></div>
    <button></button>
    <input type="text">
</div>

css:

div {
    width : 200px;
    height: 200px;
    background: red;        
}
div div {
    background : transparent;
    cursor: default;
    position: absolute;
}

【讨论】：

【解决方案3】：

是的。您可以简单地将一个与容器大小相同的绝对定位的 div 放在内容的顶部。这将禁止与以下元素进行交互。

<style type="text/css">
#container{
    width:300px;
    height:300px;
    }

#shield{
    width:300px;
    height:300px;
    position:absolute;
    z-index:10;
    }

<div id="container">
<div id="shield"></div>
<a href="#" title="">You can't click me</a>
</div>

【讨论】：

【解决方案4】：

Lokase 的想法是正确的。

$(".wrapper-div-class").click(function(event) {
  event.preventDefault();
});

您也可以尝试在包含所有元素的 div 顶部设置一个 100% x 100% div z-indexed。

测试 Endy 处理页面上输入元素的答案。

【讨论】：

您仍然可以使用键盘访问输入。
所以如果我有
脚本看起来像 <script> $("#zakladne_info").click(function(event) { event.preventDefault(); }); </script> ?
正确。而且你不需要它，但总是包含关闭的好习惯；在你的函数方法之后。

【解决方案5】：

你可以这样做

<div onclick="return false">
... <!-- insert here your buttons -->
</div>

【讨论】：

这行不通：div 不是事件的第一个接收者。
对不起，如果你使用 jquery，你可以试试这个jsfiddle.net/8mCYv/3

【解决方案6】：

在 div 上添加一个透明层：fiddle。

div {
    position: relative;
}

div:after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}

【讨论】：

为什么投反对票？请证明。

【解决方案7】：

在要覆盖的任何元素上使用 preventDefault：

event.preventDefault()

您也可以在特定情况下使用 stopPropagation

event.stopPropagation

【讨论】：

你必须绑定很多事件，因为你仍然可以使用键盘输入。

【解决方案8】：

您可以使用 Javascript 和 JQuery 在 div 上禁用所有输入元素，然后在您选择时启用它们。

例子：

$('.myDiv:input').each(function()) {
    $(this).prop('disabled', 'disabled');
}

如果您不需要动态更改输入，则只需在元素中设置 'disabled="disabled"'。

这种方法也比“不可见的 div”更好，因为如果用户无法单击页面上的控件或选择文本，这可能会让用户非常困惑。

【讨论】：

这会处理页面上的任何链接元素吗？
投反对票的人可以解释原因。
没有提到链接。此外，在页面上有不可点击的链接是非常糟糕的设计。
具有无法使用的表单的整个概念是糟糕的设计，但这就是问题所在。
查看问题评论中发布的答案，然后决定您认为哪种方法更好。