使元素不可点击（点击它后面的东西）答案

【问题标题】：Make element unclickable (click things behind it)使元素不可点击（点击它后面的东西）
【发布时间】：2013-08-07 15:06:59
【问题描述】：

当用户滚动触摸屏（移动设备）时，我有一个覆盖页面的固定图像。

我想让该图像“不可点击”或“非活动”或其他任何东西，这样如果用户触摸并从该图像拖动，它后面的页面仍会滚动，就好像该图像不存在“阻止”交互一样.

这可能吗？如果需要，我可以尝试提供屏幕截图来说明我的意思。

谢谢！

【问题讨论】：

【解决方案1】：

设置 CSS - pointer-events: none 应该删除任何鼠标与图像的交互。在除 IE 之外的所有版本中都得到了很好的支持。

Here's a full list 的值 pointer-events 可以接受。

【讨论】：

完美！我之前没有遇到过pointer-events，这正是我想要的。谢谢！
@Dusty 有点道理，您正在禁用鼠标交互但想要鼠标交互。您的具体用例是什么？从 UX 的角度来看，这似乎违反直觉，因为指针暗示该元素是可点击的。如果你把 JSFiddle 放在一起，我可以看看。
@ChrisBrown 光标的变化有点挤。这是我想出的一点点 jsfiddle.net/cxwvdos0 有点疯狂只是禁用一个按钮一秒钟而不改变光标。 jQuery unbind 和 bind 如果我想转换我的匿名函数，我认为会起作用。不过感谢您的回复！
@HamendraSunthwal 真的吗？你发现了什么？ MDN 没有说明它不能在移动设备上运行

【解决方案2】：

CSS 指针事件是您想要查看的内容。在您的情况下，将指针事件设置为“无”。以这个 JSFiddle 为例...http://jsfiddle.net/dppJw/1/

请注意，双击该图标仍会显示您单击了该段落。

div.child {
    ...    
    background: #fff;
    pointer-events: none //This line is the key!
}

【讨论】：

【解决方案3】：

如果你想使用 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>

【讨论】：