jQuery onMouseover/onClick触摸屏用户(即iPad)

Question

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

这些内容与我的问题无关，只是简单地解释了它们不是文本的，因此没有清晰易读的标签来解释菜单项的作用。

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

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

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

当在iPad上查看时(可能还有其他触屏设备)，onMouseover被处理为onClick，因此，"点击"按钮只显示工具提示，而不是所需的菜单。

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

我已经看到这个线程检测iPad用户使用jQuery?因此，假设它是一个私有web应用程序，我可以检测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/)。

修改后的演示，带有事件分配函数:

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触摸手势