确定并绑定点击或"触摸"事件

Question

我正在使用以下代码绑定"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.

以上似乎适用于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]用于放入HTML模板的JavaScript实用程序,这些模板将添加js或touch用于CSS和/或JS的类.

Answer 1

我强烈建议不要使用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
}

Answer 2

这可能对你有用:

var clickEvent = ((document.ontouchstart!==null)?'click':'touchstart');
$("#mylink").on(clickEvent, myClickHandler);

Answer 3

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

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