HTML/CSS：让 div 对点击“不可见”？答案

【问题标题】：HTML/CSS: Make a div "invisible" to clicks?HTML/CSS：让 div 对点击“不可见”？
【发布时间】：2011-04-02 02:18:22
【问题描述】：

出于各种原因，我需要在某些文本上放置一个（大部分）透明的<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>

【问题讨论】：

简短的回答是否定的。（讨论过好几次了，不过这个骗子难找，想不出好的关键词……）透明的DIV有什么用？
我认为这不可能。也许你会讲述“各种原因”，即你真正想要实现的目标？
@Null 在明确 OP 想要做什么之前，我会保留 -1。
NullUserException - 他的提议如何阻止人们从他的网站复制内容？如果有的话，他正试图做相反的事情——他希望消除透明 div 的影响（使文本更难点击和选择）。
@Hammer 你是对的。我删除了反对票。

标签： html css events

【解决方案1】：

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

#overlay {
  pointer-events: none;
}

【讨论】：

啊，看起来不错！现在，唯一的问题是我必须让一些孩子 accept 指针事件......但也许我可以解决这个问题。谢谢！
酷：pointer-events: visible 看起来它会完全完成我想要的。谢谢！
在 chrome 中工作！喜欢这是可能的！
有一个指针事件polyfill：github.com/kmewhort/pointer_events_polyfill
最简单最严格的正向答案！

【解决方案2】：

可以通过在临时隐藏叠加层后重新触发事件来完成。

查看此问题的第一个答案： HTML "overlay" which allows clicks to fall through to elements behind it

【讨论】：

【解决方案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();
}

【讨论】：

【解决方案4】：

使用这个 jQuery

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

将“div”替换为 ID 或元素

【讨论】：

【解决方案5】：

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

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

或

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

【讨论】：

jquery 现在使用off() 代替unbind()，并且只删除处理程序，不会阻止 div 捕获点击。