绕过 iOS 的鼠标悬停事件
我们的网站利用 overLIB 库来显示有关鼠标悬停时可点击链接的“更多信息”。结果是，在 iOS 设备上，第一次单击将导致出现鼠标悬停文本，而第二次单击将激活链接。
对于非 iOS 浏览器保留鼠标悬停文本，同时为使用 iOS 的用户绕过它，以便对于 iOS，链接在第一次单击时激活，最简单的方法是什么？
Our website makes use of the overLIB library to show "more information" about clickable links on mouseover. The result is that on iOS devices, the first click will result in the mouseover text appearing, while the second will activate the link.
What is the easiest way to keep the mouseover text for non-iOS browsers, while bypassing it for users using iOS, so that for iOS, the links are activated on the first click?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
如果您想要一个简单的解决方案，您可以使用 Modernizr 之类的工具，如下所述：使用 JavaScript 检测“触摸屏”设备的最佳方法是什么？。然后，您可以将 overLIB 事件绑定到非触摸类等。这样，您就可以解决所有触摸设备用户的问题，而不仅仅是 iOS 用户。当然，如果你只想要 iOS 用户，你可以随时 UA 嗅探 ( http://www. quirksmode.org/js/detect.html ），但不建议这样做。
但是，您仍然会遇到为不需要的用户加载 overLIB 脚本的问题。我认为避免这种情况的最佳方法取决于你的堆栈的其余部分。
另一件需要考虑的事情是悬停提示的目的。如果它们在您的桌面网站上很有用，可以帮助用户了解他们要去的地方，而无需进行点击投资，那么为什么它们在您的触摸设备网站上没有用呢？我知道悬停在触摸设备上很笨重，但我认为它们很常见，因为目前还没有其他选择。我敢打赌，触摸设备用户都了解流程。我想到的唯一例子是 Seamless.com - 当您从餐厅选择菜单项时，您会得到一个“悬停”描述，然后需要第二次单击才能选择该项目。
我意识到这是一个老问题——为 Google 员工解答。 :)
If you want an easy solution, you can use something like Modernizr as described here: What's the best way to detect a 'touch screen' device using JavaScript?. Then, you can bind your overLIB events to the non-touch classes, etc. This way, you can address all touch device users and not just iOS users. Of course, if you want just iOS users, you can always UA sniff ( http://www.quirksmode.org/js/detect.html ), though its not recommended.
However, you then still have the problem that you're loading the overLIB script(s) for users who don't need it. I think the best way to avoid this depends on the rest of your stack.
Another thing to think about is the purpose of the hover tips. If they are useful on your desktop site for helping users to learn about where they're going without making the investment of a click, why aren't they useful on your touch device site? I know that hover is clunky on touch devices, but I think they're common enough since there's no alternative yet. I'd bet that touch device users understand the flow. The only example that comes to mind is Seamless.com - when you select a menu item from a restaurant, you get a "hover" description and then it requires a second click to select the item.
I realize that this is an old question - answering for the Googlers. :)
另一个解决方案是使用
.mousemove()而不是。鼠标悬停（）。iOS 会忽略
.mousemove()事件并在第一次触摸时触发单击。Another solution is to use
.mousemove()instead of.mouseover().iOS ignores the
.mousemove()event and triggers a click on the first touch.