javascript - examples - Determinar y vincular el clic o evento "táctil"
mobile detect redirect javascript (3)
Esto puede funcionar para usted:
var clickEvent = ((document.ontouchstart!==null)?''click'':''touchstart'');
$("#mylink").on(clickEvent, myClickHandler);
Estoy usando el código a continuación para vincular eventos "click" o "touchstart" (usando jQuery''s 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 tenga "visión túnel del iPad" ...
Mis preguntas):
¿Los demás dispositivos (por ejemplo, tabletas Android) tienen un nombre similar a los eventos "touchstart"? De ser así, ¿cómo puedo mejorar el código anterior para poder dar cuenta de esos tipos de eventos?
En otras palabras, ¿cómo puedo dar cuenta de una gama más amplia de dispositivos táctiles en el código anterior (no solo en el iPad)?
EDIT # 1
¿Qué piensan ustedes acerca de esto?
var foo = (''ontouchstart'' in window) ? ''touchstart'' : ((window.DocumentTouch && document instanceof DocumentTouch) ? ''tap'' : ''click'');
Nota: la mayoría 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 olfateando UA. :)
¿El tap es un buen valor por defecto para todos los demás dispositivos táctiles?
EDIT # 2
Aquí hay información interesante que enlaza con esto:
Creación de botones rápidos para aplicaciones web móviles
No es una respuesta directa en realidad, pero brinda muchos detalles sobre la situación de los desarrolladores de situaciones cuando enfrentan eventos relacionados con clics para múltiples plataformas y dispositivos.
EDIT # 3
Buena información aquí también:
Eventos táctiles de Android y iPhone
Las versiones de Android y iPhone de WebKit tienen algunos eventos táctiles 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 cambiaré el código anterior a esto:
var foo = ((''ontouchstart'' in window) || (window.DocumentTouch && document instanceof DocumentTouch)) ? ''touchstart'' : ''click'';
Cuando le pregunté por primera vez, no teniendo acceso a nada más que un iPad / iPhone, supuse que el touchstart era un evento específico de iOS; ahora parece que el touchstart y el click cubrirán la mayoría, si no todas, las bases para dispositivos táctiles.
Actualización de agosto de 2014:
Si es de alguna ayuda, he publicado algunas clases de utilidad aquí:
[no-js] [sin toque] Utilidades de JavaScript para poner en plantillas HTML que agregarán
jso clasestouchpara usar en CSS y / o JS.
Recomiendo encarecidamente no usar UA para determinar si estás en contacto con el medio ambiente.
Utilice Modernizr en su lugar: http://modernizr.com/ El siguiente código reconocería cualquier cosa que no sea Windows Phone 7 porque el teléfono con Windows 7 no activa los eventos táctiles normales del navegador. Sin embargo, lo más probable es que WP8 sea reconocido correctamente.
if (Modernizr.touch){
// bind to touchstart, touchmove, etc and watch `event.streamId`
} else {
// bind to normal click, mousemove, etc
}
Tanto iOS como Android tienen eventos táctiles, pero Windows usa eventos MSPointer en IE. Si quieres una solución para varios dispositivos, prueba pointer.js o aprende de ella: