使元素无法点击（在其后面点击其他东西）

Question

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

我希望使该图像“不可点击”、“不活跃”或其他类似的操作，以便如果用户触摸并从该图像拖动，页面仍然会滚动，就好像该图像不存在，不会“阻止”交互。

这种操作是否可行？如果需要，我可以尝试提供屏幕截图来说明我的意思。

谢谢！

- hannebaumsaway

Answer 1

设置CSS - pointer-events: none应该能够移除所有图片的鼠标交互功能。这个属性在几乎所有浏览器中都得到了很好的支持，但IE例外。

这里是pointer-events可以使用的完整列表。

- Chris Brown

---

太好了！我以前从未接触过pointer-events，这正是我要找的。谢谢！ - hannebaumsaway

@Dusty 有点道理，你禁用了鼠标交互，但又想要鼠标交互。你的具体使用场景是什么？从用户体验的角度来看，这似乎是违反直觉的，因为指针意味着该元素可点击。如果你能提供一个 JSFiddle，我可以帮你查看一下。 - Chris Brown

@ChrisBrown 光标的变化有点抖动。这是我想到的一点点东西 http://jsfiddle.net/cxwvdos0/ 为了只禁用一个按钮一秒钟而不改变光标，这有点疯狂。如果我想转换我的匿名函数，jQuery的unbind和bind可能会起作用。不过还是感谢您的回复！ - Dusty

@HamendraSunthwal 真的吗？你找到了什么？MDN上没有说它不能在移动设备上工作。 - tonitone120

Answer 2

CSS指针事件是您要查看的内容。在您的情况下，将pointer-events设置为"none"。 查看此JSFiddle示例... http://jsfiddle.net/dppJw/1/

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

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

- Terry

---

单击*，在FF 68.0中，代码示例（点击图标）对我无效。 - Andrew

Answer 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>

- Husam Ebish

Answer 4

这是CSS教程（最简易版）：

#button{
  pointer-events: none;
}

<button id="button">Unclickable!</button> <!-- The element -->

- محمد حسین کثیرلو