Question

我做了一个简短的例子，说明了我到目前为止in this jsfiddle，但我想要的可能是当你将鼠标移到div上时，你点击div的一个点是一个文本框（在此示例中），您不与文本框交互，您仍然只与div交互。就像文本框上有一条看不见的毯子一样，你触发了毯子的点击事件，但没有把注意力集中在文本框上。

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

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，请参阅this小提琴）

#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将无效。

您可以使用@Prison建议的解决方案，但它使用的内容属性并非所有浏览器都支持。您可以使用此jQuery解决方案，在单击 -

时取消选择该框

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

Answer 3

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

Answer 4

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

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

在div上放一条毯子以“禁用”div中的所有控件

4 个答案: