Question

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

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

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

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

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

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

处理此问题的建议是什么？

我已经看过这个帖子Detect iPad users using jQuery?所以，鉴于它是一个私人网络应用程序，我可以检测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 demo中没有事件绑定（现在）（我还制作了一个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 demo（以及TinyUrled替代方案：tinyurl.com/drtjstest3/）。

参考文献：

问题和答案，在Stackoverflow：
- Detecting support for a given JavaScript event?
- iOS Web App touch gestures

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

1 个答案: