HTML/CSS：使 div 对点击“不可见”？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3538489/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML/CSS: Make a div "invisible" to clicks?
提问by David Wolever
For various reasons, I need to put a (mostly) transparent <div>over some text. However, this means that the text can't be clicked (eg, to click links or select it). Would it be possible to simply make this div "invisible" to clicks and other mouse events?
由于各种原因，我需要<div>在某些文本上放置（大部分）透明。但是，这意味着无法单击文本（例如，单击链接或选择它）。是否可以简单地使这个 div 对点击和其他鼠标事件“不可见”？
For example, the overlaydiv covers covers the text, but I would like to be able to click/select the text through the overlaydiv:
例如，overlaydiv 覆盖了文本，但我希望能够通过overlaydiv单击/选择文本：
<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>
回答by Ionu? G. Stan
It can be done using CSS pointer-events. This property is supported in Firefox 3.6+, Chrome 2+, IE 11+, and Safari 4+. Unfortunately, I don't have knowledge of a cross-browser workaround.
它可以使用 CSS 来完成pointer-events。Firefox 3.6+、Chrome 2+、IE 11+ 和 Safari 4+ 支持此属性。不幸的是，我不了解跨浏览器的解决方法。
#overlay {
pointer-events: none;
}
回答by Joeri Sebrechts
It can be done by refiring the event after you temporarily hide the overlay.
可以通过在暂时隐藏覆盖层后重新触发事件来完成。
See the first answer to this question: HTML "overlay" which allows clicks to fall through to elements behind it
请参阅此问题的第一个答案： HTML“overlay”，它允许点击落入其后面的元素
回答by Donald Duck
You can do this by hiding the overlay like this:
您可以通过像这样隐藏叠加层来做到这一点：
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();
}
回答by Dean Van Greunen
Use this jQuery
使用这个 jQuery
$("div").click(function(e){e.preventDefault();});
replace "div" with the ID or element
用 ID 或元素替换“div”
回答by Muhammad Nasir
Alternative for disabling all events(or chick) on a div is unbind() all event that are attached with tags by default
禁用 div 上所有事件（或小鸡）的替代方法是 unbind() 默认情况下附加标签的所有事件
$('#myDivId').unbind();
or
或者
$('#myDivId').unbind("click");
