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

所以,我已经将一个可折叠的菜单变成了一个基于网站的系统,它将菜单最小化为屏幕右上角的6个"宝石按钮",每个按钮看起来都相同并且包含一个数字,这是指的警报数量.菜单中的项目.

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

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

还有一个onClick事件,jQuery将菜单滑入视图.

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

例如,当在iPad上观看时(可能是其他触摸屏设备),onMouseover将作为onClick处理,因此,"点击"按钮只显示工具提示,而不是按要求显示菜单.

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

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

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