确定并绑定点击或“触摸”事件

我使用下面的代码来绑定“click”或“touchstart”事件(使用jQueryon(eventType, function() { ... }) )。

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

稍后的:

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

…这对iPad和“其他”非常有用,但是我担心上面的代码有“iPad隧道愿景”…

我的问题:

所有其他设备(例如Android平板电脑)是否也有类似的命名为“touchstart”事件? 如果是这样,我怎样才能改善上述代码,以便我可以说明这些事件types?

换句话说,我怎么能在上面的代码(不仅仅是iPad)中考虑更多的触摸设备呢?


编辑#1

你们有什么想法:

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

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

以上似乎适用于Firefox / iPad …我目前没有其他testing。

我喜欢上面的是我不是UA嗅探。 🙂

是否tap所有其他触摸设备的默认设置?


编辑#2

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

为移动Web应用程序创build快速button

真的不是一个直接的答案,但是当面对与多个平台和设备的点击相关的事件时,开发者面临着许多细节。


编辑#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的事件; 它现在看起来像touchstartclick将涵盖大部分,如果不是全部,触摸设备的基地。


2014年8月更新:

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

  • mhulse / no-x.js :

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

Solutions Collecting From Web of "确定并绑定点击或“触摸”事件"

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

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

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

这可能对你有用:

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