使元素不可单击（单击其后面的内容）

91

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

我想使该图像“不可点击”或“无效”或其他，以便用户触摸并从该图像拖动时，它后面的页面仍会滚动，就好像该图像没有“阻塞”交互一样。

这可能吗？如果需要，我可以尝试提供一些示例说明的屏幕截图。

谢谢！

html css mobile scroll touch

— Hannebaumsaway
source

180

设置CSS- pointer-events: none应该删除任何鼠标与图像的交互。除了IE之外，其他所有功能都支持得很好。

— 克里斯·布朗
source

2

完善！我以前没有碰到pointer-events过，这正是我想要的。谢谢！

— hannebaumsaway 2013年

1

@Dusty Kinda很有道理，您正在禁用鼠标交互，但是想要鼠标交互。您的具体用例是什么？从UX的角度看，这似乎很直观，因为指针暗示该元素是可单击的。如果您将JSFiddle放在一起，我可以看看。

— 克里斯·布朗

@ChrisBrown的光标更改有点混乱。这是我想出的一点点jsfiddle.net/cxwvdos0有点疯狂，只是禁用按钮一秒钟而没有更改光标。jQueryunbind和bind我想如果我想转换我的匿名函数会行得通。谢谢您的回应！

— 尘土飞扬

17

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

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

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

— 特里
source

1

谢谢你的例子！

— hannebaumsaway 2013年

单击FF *和代码示例（单击图标）在FF 68.0中对我不起作用。

— 安德鲁（Andrew）

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>

— 胡萨姆·埃比什
source