30

我正在使用下面的代码来绑定“click”或“touchstart”事件（使用 jQuery 的on(eventType, function() { ... })）。

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

稍后的：

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

...这适用于 iPad 和“其他一切”，但我担心上面的代码有“iPad 隧道视野”...

我的问题：

所有其他设备（例如，Android 平板电脑）是否具有类似命名的“touchstart”事件？如果是这样，我该如何改进上面的代码，以便我可以解释这些事件类型？

换句话说，我怎样才能在上面的代码中解释更广泛的触摸设备（不仅仅是 iPad）？

编辑#1

大家对此怎么看：

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

注意：以上大部分逻辑来自 Modernizr here。

以上似乎适用于 Firefox/iPad ......目前我没有太多要测试的东西。

我喜欢上面的内容是我不是 UA 嗅探。:)

对所有其他触摸设备来说都是tap一个好的默认值吗？

编辑#2

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

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

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

编辑#3

这里也有一些很好的信息：

Android 和 iPhone 触摸事件

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

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

看完之后，我想我会把上面的代码改成这样：

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

当我第一次问我的问题时——除了 iPad/iPhone 之外无法访问任何东西——我认为touchstart这是一个 iOS 特定的事件；它现在看起来touchstart并且click将涵盖大部分（如果不是全部）触摸设备的基础。

2014 年 8 月更新：

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

  • mhulse / no-x.js：

    [no-js] [no-touch] JavaScript 实用程序，用于放入将添加的 HTML 模板js或touch用于 CSS 和/或 JS 的类。

4

3 回答 3

14

我强烈建议不要使用 UA 来确定您是否处于触摸环境中。

改用 Modernizr：http: //modernizr.com/ 下面的代码可以识别除 windows phone 7 之外的任何东西，因为 windows phone 7 不会触发常规的浏览器触摸事件。但是 WP8 很可能会被正确识别。

if (Modernizr.touch){
   // bind to touchstart, touchmove, etc and watch `event.streamId`
} else {
   // bind to normal click, mousemove, etc
}
于 2012-07-12T07:54:20.647 回答
12

这可能对您有用：

var clickEvent = ((document.ontouchstart!==null)?'click':'touchstart');
$("#mylink").on(clickEvent, myClickHandler);
于 2015-08-20T02:31:14.563 回答
9

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

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

于 2012-07-16T06:51:24.637 回答