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

问题描述

我正在使用下面的代码来绑定点击"；或触摸启动"事件(使用 jQuery 的 on(eventType, function() { ... })a>).

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. :)

tap 是否适用于所有其他触摸设备?

Is tap a good default for all other touch devices?

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

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

确实不是直接的答案，但提供了许多开发人员在面对多个平台和设备的点击相关事件时所面临的情况的详细信息.

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 版本的 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 和 click 将涵盖触摸设备的大部分(如果不是全部)基础.

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 或 touch 类以在 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屋！