用于触摸屏用户的jQuery onMouseover / onClick（即iPad）

所以，我把一个可折叠的菜单变成了一个基于网站的系统，它将菜单最小化到屏幕右上角的6个“gem按钮”，每个按钮看起来都一样，并且包含一个数字，这是指的警报数量。菜单中的项目。

这些内容与我的问题并不真正相关，但只是解释说它们不是文本的，因此不会有清晰易读的标签来解释菜单项的作用。

因此，我已经放了一个onMouseover工具提示，它显示一个隐藏的div，解释每个菜单项是什么。

还有一个onClick事件，jQuery将菜单滑入视图。

这是一个私人Intranet系统，我不会在公共网站上使用这些菜单，因为它不够清楚，但鉴于这是应用程序，我的问题是：

例如，当在iPad上观看时（可能是其他触摸屏设备），onMouseover被处理为onClick，因此，“点击”按钮只显示工具提示，而不是按要求显示菜单。

处理这个问题的建议是什么？

我看过这个post使用jQuery检测iPad用户？ 所以，鉴于它是一个私人网络应用程序，我可以检测iPad用户并重新构建jQuery以忽略iPad用户的onMouseover命令，但如果我要将类似的应用程序扩展到可能拥有更多用户的东西，那将是什么处理这两个事件的方法？

Answer 1

if ("ontouchstart" in window || "ontouch" in window) { // bind the relevant functions to the 'touch'-based events for iOS } else { // use the classic mouse-events, 'mouseover,' 'click' and so on. } 

我已经使用以下简单演示对此进行了测试，尽管在全屏幕JS Fiddle演示中没有事件绑定（现在）（我还制作了一个TinyUrl重定向到该演示，以便于在iOS设备中输入： tinyurl.com/drtjstest2/ ）。

带有事件分配function的修订演示：

 var body = document.getElementsByTagName('body')[0]; if ("ontouchstart" in window) { body.style.backgroundColor = 'red'; body.ontouchstart = function(){ this.style.backgroundColor = 'yellow'; }; body.ontouchend = function(){ this.style.backgroundColor = 'green'; }; } else { body.style.backgroundColor = 'green'; body.onmousedown = function(){ this.style.backgroundColor = 'yellow'; }; body.onmouseup = function(){ this.style.backgroundColor = 'red'; }; } 

JS Fiddle演示 （以及TinyUrled替代方案： tinyurl.com/drtjstest3/ ）。

参考文献：

• 问题和答案，在Stackoverflow：
  • 检测对给定JavaScript事件的支持？
  • iOS Web App触控手势