Determinar y vincular eventos de clic o "toque"

Estoy usando el código a continuación para enlazar eventos "click" o "touchstart" (usando jQuery on(eventType, function() { ... }) ).

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

Mas tarde:

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

… que funciona muy bien para iPad y "todo lo demás", pero me preocupa que el código anterior tiene "visión de túnel IPAD" …

Mis preguntas):

¿Todos los demás dispositivos (por ejemplo, tabletas de Android) también tienen el mismo nombre de eventos "touchstart"? Si es así, ¿cómo puedo mejorar el código anterior para que pueda tener en cuenta esos tipos de eventos?

En otras palabras, ¿cómo puedo tener en cuenta una gama más amplia de dispositivos táctiles en el código anterior (no sólo en el iPad)?


EDIT # 1

¿Qué piensan ustedes sobre esto:

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

Nota: La mayor parte de la lógica anterior es de Modernizr aquí .

Lo anterior parece funcionar para Firefox / iPad … No tengo mucho más para probar en este momento.

Lo que me gusta de lo anterior es que no estoy respirando. 🙂

¿Es un buen valor predeterminado para todos los demás dispositivos táctiles?


EDIT # 2

Algunos datos interesantes aquí , que enlaza con esto:

Creación de botones rápidos para aplicaciones web móviles

No es una respuesta directa realmente, pero da muchos detalles de la situación que los desarrolladores enfrentan cuando se enfrentan a eventos relacionados con el clic para múltiples plataformas y dispositivos.


EDIT # 3

Una buena información aquí también:

Eventos de touch de Android y iPhone

Las versiones para Android y iPhone de WebKit tienen algunos eventos de toque en común:

 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 

Después de leer eso, creo que voy a cambiar el código de arriba a esto:

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

Cuando primero le pregunté a mi pregunta – no tener acceso a nada más que un iPad / iPhone – asumí que touchstart era un evento específico de iOS; Ahora se ve como touchstart y click cubrirá la mayoría, si no todas, de las bases de los dispositivos táctiles.


Actualización de agosto de 2014:

Si es de alguna ayuda, he publicado algunas clases de utilidad aquí:

  • Mhulse / no-x.js :

    [No-js] [no-touch] Utilidades JavaScript para poner en plantillas HTML que añadir js o touch clases para su uso en CSS y / o JS.

Tanto iOS como Android tienen eventos táctiles, pero Windows utiliza eventos MSPointer en IE. Si desea una solución entre dispositivos, intente pointer.js o aprenda de ella:

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

Yo sugeriría fuertemente contra el uso de UA con el fin de determinar si estás en contacto con el medio ambiente.

Utilice Modernizr en lugar de otro: http://modernizr.com/ El código abajo reconocería cualquier cosa menos el teléfono 7 de las ventanas porque el teléfono 7 de Windows no dispara los acontecimientos regulares del tacto del browser. Sin embargo WP8 probablemente sería reconocido correctamente.

 if (Modernizr.touch){ // bind to touchstart, touchmove, etc and watch `event.streamId` } else { // bind to normal click, mousemove, etc } 

Esto puede funcionar para usted:

 var clickEvent = ((document.ontouchstart!==null)?'click':'touchstart'); $("#mylink").on(clickEvent, myClickHandler); 
  • Plugin de androide phonegap ActionBar wrapper
  • ¿Cómo hacer que el número no sea accesible (similar al bloqueador de llamadas)?
  • Bluetooth - Dispositivos de clase 1?
  • Desarrollo móvil (Android & iOS) principiante necesita orientación
  • ¿Es posible tener tanto atrás y botón de menú en la barra de herramientas de Android?
  • ¿Cómo encajar en la pantalla después de cambiar el ancho de la ventana de visualización en el cambio de orientación?
  • Inicie el navegador predeterminado desde el navegador de portal cautivo de Android (CaptivePortalLogin)
  • ¿Reproduce vídeos de vimeo usando el reproductor nativo de android?
  • Multi Seleccionar cuadro <select> en dispositivos móviles
  • JavaScript cómo comprobar el agente de usuario para Mobile / Tablet
  • ¿Cómo funcionan los SDK móviles de plataforma cruzada C ++ en general bajo el capó?
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.