HTML/CSS：使 div 对于点击“不可见”？

Question

由于各种原因，我需要在一些文本上放置（大部分）透明的

<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>

Answer 1

可以使用CSS来完成

pointer-events

。 Firefox 3.6+、Chrome 2+、IE 11+ 和 Safari 4+ 支持此属性。不幸的是，我不知道跨浏览器解决方法。

#overlay {
  pointer-events: none;
}

Answer 2

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

参见该问题的第一个答案： HTML“覆盖”，允许点击进入其后面的元素

Answer 3

您可以通过隐藏覆盖层来做到这一点，如下所示：

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();
}

Answer 4

使用这个 jQuery

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

将“div”替换为 ID 或元素

Answer 5

禁用 div 上的所有事件（或小鸡）的替代方法是 unbind() 默认情况下附加有标签的所有事件

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

或

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