HTML/CSS: 使一个 div“不可见”的点击？

由于各种原因，我需要在一些文本上放置一个(大部分)透明的 <div>。但是，这意味着不能单击文本(例如，单击链接或选择它)。是否可以简单地使这个 div 对单击和其他鼠标事件“不可见”？

例如，overlay div 覆盖文本，但我希望能够通过 overlay div 单击/选择文本:

<div id="container">
<p>Some text</p>
<div id="overlay" style="position: absolute; top: 0;
left: 0; width: 100%; height:100%">
... some content ...
</div>
</div>
36969 次浏览
小开

可以通过在暂时隐藏覆盖后重新激发事件来完成。

请看这个问题的第一个答案: HTML“覆盖”，允许点击通过它后面的元素

小开
最佳答案

它可以使用 CSS pointer-events来完成。Firefox 3.6 + 、 Chrome 2 + 、 IE 11 + 和 Safari 4 + 都支持此属性。不幸的是，我不知道什么跨浏览器解决方案。

#overlay {
pointer-events: none;
}
小开

Alternative for disabling all events(or chick) on a div is unbind() all event that are attached with tags by default 

  $('#myDivId').unbind();

or

  $('#myDivId').unbind("click");
小开

你可以像这样隐藏覆盖图:

overlay.onclick = function(){
window.event.srcElement.style.visibility = "hidden";
var BottomElement = document.elementFromPoint((navigator.appName.substring(0,3) == "Net") ? e.clientX : window.event.x,(navigator.appName.substring(0,3) == "Net") ? e.clientY : window.event.y);
window.event.srcElement.style.visibility = "visible";
BottomElement.click();
}
小开

使用这个 jQuery

$("div").click(function(e){e.preventDefault();});

用 ID 或元素替换“ div”


提交答案