用于触摸屏用户的jQuery onMouseover / onClick（即iPad） [英] jQuery onMouseover/onClick for Touchscreen users (ie iPad)

问题描述

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

So, I've made a collapsible menu into a web site based system which minimised the menu into 6 "jewel buttons" on the top right of the screen, each looks the same and contains a number, which is the number of alerts referring to items within the menu.

这些内容与我的问题无关，但只是解释说它们不是文字的，因此不具备清晰易读的标签，说明菜单项的功能。

The content of these is not really relevant to my question, but simply explains that they are not therefore textual and don't therefore have clear and easy to read labels explaining what the menu items do.

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

Therefore, I have put an onMouseover tool tip which displays a hidden div explaining what each menu item is.

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

There is also an onClick event where jQuery slides the menu into view.

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

This is a private Intranet system, I wouldn't use these menus on a public website as it's not clear enough, but given that this is the application, my problem is:

在iPad上查看onMouseover得到的例子（可能是其他触摸屏设备）因此，点击按钮只显示工具提示，而不是按要求显示菜单。

When viewed on an iPad for example (and presumably other touchscreen devices), the onMouseover gets handled as an onClick so therefore, 'clicking' the button just shows the tooltip and not the menu as required.

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

What's the advice on handling this?

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

I have seen this thread Detect iPad users using jQuery? so, given that it's a private web application I could detect iPad users and re-construct the jQuery to ignore the onMouseover command for iPad users, but if I were to expand a similar application to something that may have more users, what would be the way to handle these two events?

推荐答案

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小提琴演示（我'我还制作了一个TinyUrl重定向到该演示，以便于在iOS设备中输入： tinyurl.com/drtjstest2/ ）。

I've tested this with the following simple demo, albeit without event-binding (as yet) in the full-screen JS Fiddle demo (I've also made a TinyUrl to redirect to that demo, for ease of entry in the iOS devices: tinyurl.com/drtjstest2/).

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

Revised demo, with event-allocated functions:

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小提琴演示（以及TinyUrled替代方案： tinyurl.com / drtjstest3 / ）。

JS Fiddle demo (and the TinyUrled alternative: tinyurl.com/drtjstest3/).

参考文献：

• 问题和答案，这里是Stackoverflow：
  
  
  
  
  • 检测对给定JavaScript事件的支持？
  
  
  • iOS Web App触控手势
  
  
  • Questions and answers, here at Stackoverflow:
    • Detecting support for a given JavaScript event?
    • iOS Web App touch gestures

    这篇关于用于触摸屏用户的jQuery onMouseover / onClick（即iPad）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！