使元素不可点击（点击其后面的东西）

Question

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

我想让该图像“不可点击”或“非活动”或其他什么，这样，如果用户触摸并拖动该图像，其后面的页面仍然滚动，就好像图像不在那里“阻止”交互一样。

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

谢谢！

Answer 1

设置 CSS -

pointer-events: none

应删除任何鼠标与图像的交互。除 IE 之外的所有版本都支持得很好。

可以采用的值的完整列表

。

Answer 2

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

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

pointer-events

Answer 3

如果你想使用 JavaScript :

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

document.getElementById("x").style.pointerEvents = "none";

Answer 4

这是CSS教程（最简单的）：

<a href="https://www.google.com" id="x" />Unclickable Google Link</a>
<br>
<a href="https://www.google.com" id="" />Clickable Google Link</a>

#button {
  pointer-events: none;
}