Detectando dispositivos de tela de toque com Javascript

Em Javascript / jQuery, como posso detectar se o dispositivo cliente possui um mouse?

Eu tenho um site que desliza um pequeno painel de informações quando o usuário passa o mouse sobre um item. Estou usando o jQuery.hoverIntent para detectar o foco, mas isso obviamente não funciona em dispositivos touchscreen como iPhone / iPad / Android. Então, nesses dispositivos, eu gostaria de reverter para tocar para mostrar o painel de informações.

+1 para fazer hovere clickambos. Uma outra maneira poderia ser usar consultas de mídia CSS e usar alguns estilos apenas para telas / dispositivos móveis menores, que são os que têm mais probabilidade de ter a funcionalidade de toque / toque. Portanto, se você tem alguns estilos específicos via CSS e, no jQuery, verifica esses elementos para as propriedades de estilo do dispositivo móvel, pode conectar-se a eles para escrever um código específico para o seu celular.

Veja aqui: http://www.forabeautifulweb.com/blog/about/hardboiled_css3_media_queries/

var isTouchDevice = 'ontouchstart' in document.documentElement;

Nota : O fato de um dispositivo suportar eventos de toque não significa necessariamente que ele é exclusivamente um dispositivo de tela de toque. Muitos dispositivos (como o meu Asus Zenbook) suportam eventos de clique e toque, mesmo quando não possuem nenhum mecanismo de entrada de toque real. Ao projetar para suporte por toque, sempre inclua suporte a eventos de clique e nunca assuma que um dispositivo seja exclusivamente um ou outro.

O teste encontrado para o window.Touch não funcionou no Android, mas faz isso:

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

Veja o artigo: Qual é a melhor maneira de detectar um dispositivo 'touch screen' usando JavaScript?

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

Motivo para usar maxTouchPoints junto com o msMaxTouchPoints:

A Microsoft declarou que, começando com o Internet Explorer 11, a versão prefixada por fornecedor desta propriedade da Microsoft (msMaxTouchPoints) pode ser removida e recomenda o uso de maxTouchPoints.

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

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

Funciona em todos os lugares !!

Eu uso:

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

no jQuery mobile 1.0.1

O Google Chrome parece retornar falsos positivos neste:

var isTouch = 'ontouchstart' in document.documentElement;

Suponho que tenha algo a ver com a capacidade de "emular eventos de toque" (F12 -> configurações no canto inferior direito -> guia "substitui" - - última caixa de seleção). Sei que está desativado por padrão, mas é com isso que conecto a alteração nos resultados (o método "in" usado para trabalhar no Chrome). No entanto, isso parece estar funcionando, tanto quanto eu testei:

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

Em todos os navegadores em que corri esse código, o typeof é "objeto", mas tenho mais certeza de que é indefinido :-)

Testado no IE7, IE8, IE9, IE10, Chrome 23.0.1271.64, Chrome para iPad 21.0.1180.80 e iPad Safari. Seria legal se alguém fizesse mais alguns testes e compartilhasse os resultados.

Escrevi isso para um dos meus sites e provavelmente é a solução mais infalível. Especialmente porque até o Modernizr pode obter falsos positivos na detecção de toque.

Se você estiver usando jQuery

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

ou apenas JS puro ...

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

Para meu primeiro post / comentário: todos sabemos que o 'touchstart' é acionado antes do clique. Também sabemos que, quando o usuário abrir sua página, ele (a) irá: 1) mover o mouse 2) clicar em 3) tocar na tela (para rolar ou ... :))

Vamos tentar algo:

// -> Iniciar: 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';
});

// <- Fim: jQuery

Tenha um bom dia!

Eu testei o seguinte código mencionado acima na discussão

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

funciona no Android Mozilla, chrome, Opera, navegador padrão do Android e safari no iphone ... tudo positivo ...

parece sólido para mim :)

Um post útil sobre o assunto, vinculado a partir da fonte Modernizr para a detecção de eventos de toque. Conclusão: não é possível detectar com segurança dispositivos de tela sensível ao toque do Javascript.

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

Isso funciona para mim:

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

Se você usa o Modernizr , é muito fácil usar Modernizr.touchcomo mencionado anteriormente.

No entanto, eu prefiro usar uma combinação de Modernizr.touche teste de agente de usuário, apenas por segurança.

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
    }

Se você não usa o Modernizr, pode simplesmente substituir a Modernizr.touchfunção acima por('ontouchstart' in document.documentElement)

Observe também que ao testar o agente do usuário, iemobilevocê terá uma gama mais ampla de dispositivos móveis Microsoft detectados do que Windows Phone.

Veja também esta pergunta do SO

No jQuery Mobile, você pode simplesmente fazer:

$.support.touch

Não sei por que isso é tão indocumentado .. mas é seguro para navegadores cruzados (duas versões mais recentes dos navegadores atuais).

Como já mencionado, um dispositivo pode suportar entradas de mouse e toque. Muitas vezes, a questão não é "o que é suportado", mas "o que é usado atualmente".

Nesse caso, você pode simplesmente registrar eventos do mouse (incluindo o ouvinte ao passar o mouse) e tocar em eventos da mesma forma.

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

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

...

O JavaScript deve chamar automaticamente o ouvinte correto com base na entrada do usuário. Então, no caso de um evento de toque,onTouchStartCallback será acionado, emulando seu código de foco.

Observe que um toque pode disparar os dois tipos de ouvintes, toque e mouse. No entanto, o ouvinte de toque é o primeiro e pode impedir que ouvintes de mouse subseqüentes sejam acionados chamando event.preventDefault().

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

Leia mais aqui .

Para o desenvolvimento do iPad, estou usando:

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

Posso então ligar-me seletivamente aos eventos baseados em toque (por exemplo, ontouchstart) ou em eventos baseados em mouse (por exemplo, onmousedown). Ainda não testei no Android.