绕过iOS的鼠标悬停事件

Question

我们的网站利用 overLIB 库在鼠标悬停时显示有关可点击链接的“更多信息”。结果是在 iOS 设备上，第一次单击将导致鼠标悬停文本出现，而第二次将激活链接。

为非 iOS 浏览器保留鼠标悬停文本，而为使用 iOS 的用户绕过它的最简单方法是什么，以便在第一次点击时激活链接？

Answer 1

如果您想要一个简单的解决方案，您可以使用如下所述的 Modernizr：What's the best way to detect a 'touch screen' device using JavaScript?。然后，您可以将您的 overLIB 事件绑定到非触摸类等。这样，您可以处理所有触摸设备用户，而不仅仅是 iOS 用户。当然，如果你只想要 iOS 用户，你可以随时使用 UA 嗅探（http://www.quirksmode.org/js/detect.html），虽然不推荐。

但是，您仍然会遇到为不需要的用户加载 overLIB 脚本的问题。我认为避免这种情况的最佳方法取决于你的堆栈的其余部分。

要考虑的另一件事是悬停提示的目的。如果它们在您的桌面站点上很有用，可以帮助用户了解他们要去的地方而无需进行点击投资，那么为什么它们在您的触摸设备站点上没有用呢？我知道悬停在触摸设备上很笨拙，但我认为它们很常见，因为目前还没有其他选择。我敢打赌，触摸设备用户理解流程。唯一想到的例子是Seamless.com - 当您从餐厅选择菜单项时，您会看到“悬停”描述，然后需要再次单击才能选择该项目。

---

我意识到这是一个老问题 - 为 Google 员工解答。 :)

Answer 2

另一个solution 是使用.mousemove() 而不是.mouseover()。

iOS 忽略 .mousemove() 事件并在第一次触摸时触发点击。