css - 将毯子盖在 div 上以“禁用”div 中的所有控件

Question

我在这个 jsfiddle 中做了一个简短的例子，但是我想要做的事情是当你将鼠标移动到 div 上时，你点击 div 的一个点，那里有一个文本框（在这个例子），你不与文本框交互，你仍然只与 div 交互。就像文本框上有一条不可见的毯子一样，您触发了毯子的点击事件，但没有获得对文本框的关注。

我搜索了一下，似乎没有很多人问过这个问题，但我发现有人说我可以使用包含 div 的透明图像（1x1 px），并让它像这样重复

background-image: url('transparent.png');
background-repeat: repeat;

但无济于事。仍然可以“点击”该 div。我也试过设置

background: rgba(170, 170, 170, 0);

和

opacity: 0;

的透明div，它仍然是点击。我还摆弄了一些 z-index，这也没有什么区别（将毯子的 z-index 设置为比文本框的 z-index 更高的值）。

Answer 1

假设我明白你在找什么，这样的事情会起作用：http: //jsfiddle.net/43MjD/2/（如果你想看到顶部的 div，请看这个小提琴）

#content{
    position: relative;
    padding: 10px;
    border: 1px solid black;
}
#content:after {
    position: absolute;
    top: 0;
    left: 0;
    content: ' ';
    width: 100%; 
    height: 100%; 
}

-

<div id="content">
    <input type="text" />
</div>

对于它在 IE 中的工作，你可以这样做：http: //jsfiddle.net/43MjD/6/

Answer 2

将 preventDefault() 添加到 .transparent 将不起作用。

您可以使用@Prisoner 建议的解决方案，但它使用并非所有浏览器都支持的内容属性。您可以使用这个 jQuery 解决方案，它在单击该框时取消选择该框 -

jQuery('INPUT').click(function (e) {
    $(this).blur();
});

Answer 3

您必须将 css z-index 设置为较大的值，例如 10 或 15 到毯子 div 并将位置属性指定为绝对或相对，因为 z-index 仅适用于定位元素。

Answer 4

transparent = $(".transparent")
transparent.click(function(event) {
    event.preventDefault()
    // code to be executed when clicked
});

event.preventDefault()防止选择文本框。