Html 使元素不可点击（点击它后面的东西）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18083061/
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
Make element unclickable (click things behind it)
提问by hannebaumsaway
I have a fixed image that overlays a page when the user is in the act of scrolling a touch screen (mobile).
当用户滚动触摸屏（移动设备）时，我有一个固定的图像覆盖页面。
I want to make that image "unclickable" or "inactive" or whatever, so that if a user touches and drags from that image, the page behind it still scrolls as if the image weren't there "blocking" the interaction.
我想让该图像“不可点击”或“非活动”或其他什么，这样如果用户触摸并从该图像拖动，它后面的页面仍然滚动，就好像图像不存在“阻止”交互一样。
Is this possible? If need be, I could try to provide screen shots exemplifying what I mean.
这可能吗？如果需要，我可以尝试提供屏幕截图来说明我的意思。
Thanks!
谢谢！
回答by Chris Brown
Setting CSS - pointer-events: noneshould remove any mouse interaction with the image. Supported pretty well in all but IE.
设置 CSS - pointer-events: none应该删除与图像的任何鼠标交互。除了 IE 之外，所有的支持都很好。
Here's a full listof values pointer-eventscan take.
回答by Terry
CSS Pointer Events is what you want to look at. In your case, set pointer-events to "none". Look at this JSFiddle for an example... http://jsfiddle.net/dppJw/1/
CSS Pointer Events 是您想要查看的内容。在您的情况下，将指针事件设置为“无”。以这个 JSFiddle 为例... http://jsfiddle.net/dppJw/1/
Notice that double clicking on the icon will still say you click the paragraph.
请注意，双击该图标仍会显示您单击了该段落。
div.child {
...
background: #fff;
pointer-events: none //This line is the key!
}
回答by Husam Ebish
If you want to use JavaScript :
如果你想使用 JavaScript ：
document.getElementById("x").style.pointerEvents = "none";<a href="https://www.google.com" id="x" />Unclickable Google Link</a>
<br>
<a href="https://www.google.com" id="" />Clickable Google Link</a>