确定并绑定点击或“触摸”事件 [英] Determine and bind click or "touch" event

问题描述

我正在使用以下代码绑定click或touchstart事件（使用jQuery的 on（ eventType，function（）{...}） ）。

I'm using the below code to bind "click" or "touchstart" events (using jQuery's on(eventType, function() { ... })).

var what = (navigator.userAgent.match(/iPad/i)) ? 'touchstart' : 'click';

稍后：

$foo.on(what, function() { ... });

...适用于iPad和其他所有，但我担心的是上面的代码有iPad隧道视觉......

... which works great for iPad and "everything else", but I'm concerned that the above code has "iPad tunnel vision"...

我的问题：

所有其他设备（例如Android平板电脑）是否都有类似名称的touchstart事件？如果是这样，我如何改进上述代码以便我可以考虑这些事件类型？

Do all other devices (for example, Android tablets) have similarly named "touchstart" events? If so, how can I improve the above code so that I can account for those event types?

换句话说，我如何考虑更广泛的触摸设备在上面的代码（不只是iPad）？

In other words, how can I account for a wider range of touch devices in above code (not just iPad)?

你们有什么想法：

var foo = ('ontouchstart' in window) ? 'touchstart' : ((window.DocumentTouch && document instanceof DocumentTouch) ? 'tap' : 'click');

注意：以上大部分逻辑是来自Modernizr这里。

Note: Most of the above logic is from Modernizr here.

以上似乎适用于Firefox / iPad。 ..此时我没有太多可以测试的东西。

The above appears to work for Firefox/iPad... I don't have much else to test on at this time.

我喜欢上述内容的是我不是UA嗅探。 ：）

What I like about the above is that I'm not UA sniffing. :)

点击所有其他触控设备的默认设置是什么？

Is tap a good default for all other touch devices?

一些这里有趣的信息，链接到：

为移动Web应用程序创建快速按钮

不是直接答案，但提供了很多详细信息。当面对多个平台和设备的点击相关事件时，情境开发人员面临。

Not a direct answer really, but gives a lot of details of the situation devs face when facing click-related events for multiple platforms and devices.

这里有一些这里的好消息 ：

Android和iPhone触摸事件

Android和iPhone版本的WebKit有一些共同的触摸事件：

Android and iPhone touch events

Android and iPhone versions of WebKit have some touch events in common:

touchstart - triggered when a touch is initiated. Mouse equivalent - mouseDown
touchmove - triggered when a touch moves. Mouse equivalent - mouseMove
touchend - triggered when a touch ends. Mouse equivalent - mouseUp. This one is a bit special on the iPhone - see below
touchcancel - bit of a mystery

阅读完之后，我想我会将上面的代码更改为：

After reading that, I think I'll change the code above to this:

var foo = (('ontouchstart' in window) || (window.DocumentTouch && document instanceof DocumentTouch)) ? 'touchstart' : 'click';

当我第一次提出问题时 - 除了iPad / iPhone之外没有其他任何东西 - 我假设 touchstart 是特定于iOS的活动;它现在看起来像 touchstart 和点击将覆盖大部分（如果不是全部）触摸设备的基础。

When I first asked my question - not having access to anything other than an iPad/iPhone - I assumed touchstart was an iOS-specific event; it now looks like touchstart and click will cover most, if not all, of the bases for touch devices.

如果有任何帮助，我已经在这里发布了一些实用程序类：

If it's of any help, I've posted some utility classes here:

• mhulse / no-x.js ：

[no-js] [no-touch] JavaScript实用程序到放入HTML模板，将添加 js 或触摸类，以便在CSS和/或JS中使用。

[no-js] [no-touch] JavaScript utilities to put in of HTML templates that will add js or touch classes for use in CSS and/or JS.

推荐答案

iOS和Android都有触摸事件，但Windows在IE中使用MSPointer事件。如果您需要跨设备解决方案，请尝试使用pointer.js或从中学习：

Both iOS and Android have touch events, but Windows uses MSPointer events in IE. If you want a cross-device solution, try pointer.js or learn from it:

https://github.com/borismus/pointer.js

这篇关于确定并绑定点击或“触摸”事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！