Detectar dispositivos de pantalla táctil con Javascript

En Javascript / jQuery, ¿cómo puedo detectar si el dispositivo cliente tiene un mouse?

Tengo un sitio que se desliza hacia arriba en un pequeño panel de información cuando el usuario pasa el mouse sobre un elemento. Estoy usando jQuery.hoverIntent para detectar el desplazamiento, pero esto obviamente no funciona en dispositivos con pantalla táctil como iPhone / iPad / Android. Entonces, en esos dispositivos, me gustaría volver a tocar para mostrar el panel de información.

+1 por hacer hovery clickambas cosas. Otra forma podría ser usar consultas de medios CSS y usar algunos estilos solo para pantallas / dispositivos móviles más pequeños, que son los que tienen más probabilidades de tener funcionalidad táctil / táctil. Entonces, si tiene algunos estilos específicos a través de CSS, y desde jQuery verifica esos elementos para las propiedades de estilo del dispositivo móvil, puede engancharlos para escribir su código específico para dispositivos móviles.

Ver aquí: http://www.forabeautifulweb.com/blog/about/hardboiled_css3_media_queries/

var isTouchDevice = 'ontouchstart' in document.documentElement;

Nota : el hecho de que un dispositivo admita eventos táctiles no significa necesariamente que sea exclusivamente un dispositivo de pantalla táctil. Muchos dispositivos (como mi Asus Zenbook) admiten eventos de clic y toque, incluso cuando no tienen ningún mecanismo de entrada táctil real. Cuando diseñe para soporte táctil, siempre incluya soporte para eventos de clic y nunca asuma que cualquier dispositivo es exclusivamente uno u otro.

Se encontraron pruebas para window.Touch no funcionaba en Android, pero esto sí:

function is_touch_device() {
  return !!('ontouchstart' in window);
}

Ver artículo: ¿Cuál es la mejor manera de detectar un dispositivo de 'pantalla táctil' usando JavaScript?

return (('ontouchstart' in window)
      || (navigator.maxTouchPoints > 0)
      || (navigator.msMaxTouchPoints > 0));

Motivo para usar maxTouchPoints junto con msMaxTouchPoints:

Microsoft ha declarado que a partir de Internet Explorer 11, la versión prefijada por el proveedor de Microsoft de esta propiedad (msMaxTouchPoints) puede eliminarse y recomienda utilizar maxTouchPoints en su lugar.

Fuente: http://ctrlq.org/code/19616-detect-touch-screen-javascript

if ("ontouchstart" in window || navigator.msMaxTouchPoints) {
    isTouch = true;
} else {
    isTouch = false;
}

Funciona en todas partes!

Yo suelo:

if(jQuery.support.touch){
    alert('Touch enabled');
}

en jQuery mobile 1.0.1

Google Chrome parece devolver falsos positivos en este caso:

var isTouch = 'ontouchstart' in document.documentElement;

Supongo que tiene algo que ver con su capacidad de "emular eventos táctiles" (F12 -> configuración en la esquina inferior derecha -> pestaña "anular" -> última casilla de verificación). Sé que está desactivado de manera predeterminada, pero eso es con lo que conecto el cambio en los resultados (el método "in" solía funcionar en Chrome). Sin embargo, esto parece estar funcionando, por lo que he probado:

var isTouch = !!("undefined" != typeof document.documentElement.ontouchstart);

Todos los navegadores en los que he ejecutado ese código indican que typeof es "objeto", pero estoy más seguro sabiendo que es cualquier cosa menos indefinida :-)

Probado en IE7, IE8, IE9, IE10, Chrome 23.0.1271.64, Chrome para iPad 21.0.1180.80 y iPad Safari. Sería genial si alguien hiciera algunas pruebas más y compartiera los resultados.

Escribí esto para uno de mis sitios y probablemente sea la solución más infalible. Sobre todo porque incluso Modernizr puede obtener falsos positivos en la detección táctil.

Si estás usando jQuery

$(window).one({
  mouseover : function(){
    Modernizr.touch = false; // Add this line if you have Modernizr
    $('html').removeClass('touch').addClass('mouse');
  } 
});

o simplemente JS puro ...

window.onmouseover = function(){ 
    window.onmouseover = null;
    document.getElementsByTagName("html")[0].className += " mouse";
}

Para mi primera publicación / comentario: Todos sabemos que 'touchstart' se activa antes de hacer clic. También sabemos que cuando el usuario abra su página, él o ella: 1) moverá el mouse 2) hará clic en 3) tocará la pantalla (para desplazarse, o ... :))

Probemos algo:

// -> Inicio: jQuery

var hasTouchCapabilities = 'ontouchstart' in window && (navigator.maxTouchPoints || navigator.msMaxTouchPoints);
var isTouchDevice = hasTouchCapabilities ? 'maybe':'nope';

//attach a once called event handler to window

$(window).one('touchstart mousemove click',function(e){

    if ( isTouchDevice === 'maybe' && e.type === 'touchstart' )
        isTouchDevice = 'yes';
});

// <- Fin: jQuery

¡Que tengas un buen día!

He probado el siguiente código mencionado anteriormente en la discusión

 function is_touch_device() {
    return !!('ontouchstart' in window);
 }

funciona en Android Mozilla, Chrome, Opera, navegador predeterminado de Android y Safari en iPhone ... todo positivo ...

me parece sólido :)

Una publicación de blog útil sobre el tema, vinculada desde dentro de la fuente Modernizr para detectar eventos táctiles. Conclusión: no es posible detectar de manera confiable dispositivos con pantalla táctil desde Javascript.

http://www.stucox.com/blog/you-cant-detect-a-touchscreen/

Esto funciona para mi:

function isTouchDevice(){
    return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch);
}

Si usa Modernizr , es muy fácil de usar Modernizr.touchcomo se mencionó anteriormente.

Sin embargo, prefiero usar una combinación de Modernizr.touchpruebas de agente de usuario, solo para estar seguro.

var deviceAgent = navigator.userAgent.toLowerCase();

var isTouchDevice = Modernizr.touch || 
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/)  || 
deviceAgent.match(/(iemobile)/) || 
deviceAgent.match(/iphone/i) || 
deviceAgent.match(/ipad/i) || 
deviceAgent.match(/ipod/i) || 
deviceAgent.match(/blackberry/i) || 
deviceAgent.match(/bada/i));

if (isTouchDevice) {
        //Do something touchy
    } else {
        //Can't touch this
    }

Si no usa Modernizr, simplemente puede reemplazar la Modernizr.touchfunción anterior con('ontouchstart' in document.documentElement)

También tenga en cuenta que probar el agente de usuario iemobilele dará una gama más amplia de dispositivos móviles de Microsoft detectados que Windows Phone.

También vea esta pregunta SO

En jQuery Mobile simplemente puede hacer:

$.support.touch

No sé por qué esto es tan indocumentado ... pero es seguro para los navegadores cruzados (las últimas 2 versiones de los navegadores actuales).

Como ya se mencionó, un dispositivo puede admitir tanto el mouse como la entrada táctil. Muy a menudo, la pregunta no es "qué se admite" sino "qué se utiliza actualmente".

Para este caso, simplemente puede registrar eventos del mouse (incluido el oyente de desplazamiento) y tocar eventos por igual.

element.addEventListener('touchstart',onTouchStartCallback,false);

element.addEventListener('onmousedown',onMouseDownCallback,false);

...

JavaScript debería llamar automáticamente al oyente correcto según la entrada del usuario. Por lo tanto, en caso de un evento táctil, onTouchStartCallbackse disparará, emulando su código de desplazamiento.

Tenga en cuenta que un toque puede disparar ambos tipos de oyentes, toque y mouse. Sin embargo, el oyente táctil va primero y puede evitar que los siguientes oyentes del mouse disparen llamando event.preventDefault().

function onTouchStartCallback(ev) {
    // Call preventDefault() to prevent any further handling
    ev.preventDefault();
    your code...
}

Lectura adicional aquí .

Para el desarrollo de iPad estoy usando:

  if (window.Touch)
  {
    alert("touchy touchy");
  }
  else
  {
    alert("no touchy touchy");
  }

Entonces puedo vincularme selectivamente a los eventos basados ​​en el tacto (por ejemplo, ontouchstart) o eventos basados ​​en el mouse (por ejemplo, onmousedown). Todavía no lo he probado en Android.