Detectando que o navegador não possui mouse e é apenas de toque

Estou desenvolvendo um aplicativo da Web (não um site com páginas de texto interessante) com uma interface muito diferente para toque (o dedo oculta a tela quando você clica) e o mouse (depende muito da visualização instantânea). Como posso detectar que meu usuário não tem mouse para apresentar a interface correta? Pretendo deixar uma opção para as pessoas com mouse e toque (como alguns notebooks).

O recurso de evento de toque no navegador não significa que o usuário esteja usando um dispositivo de toque (por exemplo, o Modernizr não o corta). O código que responde corretamente à pergunta deve retornar false se o dispositivo tiver um mouse, caso contrário, true. Para dispositivos com mouse e toque, ele deve retornar falso (não apenas tocar)

Como observação lateral, minha interface de toque também pode ser adequada para dispositivos apenas com teclado, por isso é mais a falta de mouse que estou procurando detectar.

Para tornar a necessidade mais clara, aqui está a API que estou procurando implementar:

// Level 1


// The current answers provide a way to do that.
hasTouch();

// Returns true if a mouse is expected.
// Note: as explained by the OP, this is not !hasTouch()
// I don't think we have this in the answers already, that why I offer a bounty
hasMouse();

// Level 2 (I don't think it's possible, but maybe I'm wrong, so why not asking)

// callback is called when the result of "hasTouch()" changes.
listenHasTouchChanges(callback);

// callback is called when the result of "hasMouse()" changes.
listenHasMouseChanges(callback);

O principal problema é que você possui as seguintes classes diferentes de dispositivos / casos de uso:

1. Mouse e carregamento de teclas (área de trabalho)
2. Apenas toque (telefone / tablet)
3. Mouse, teclado e toque (touch laptops)
4. Toque e teclado (teclado bluetooth no tablet)
5. Somente mouse (preferência de usuário / navegação desabilitada)
6. Apenas teclado (preferência de usuário / navegação desabilitada)
7. Toque e mouse (ou seja, eventos de foco da caneta Galaxy Note 2)

O pior é que é possível fazer a transição de algumas dessas classes para outras (conecta-se a um mouse, conecta-se ao teclado) ou um usuário pode parecer estar em um laptop normal até chegar e tocar na tela.

Você está certo ao supor que a presença de construtores de eventos no navegador não é uma boa maneira de avançar (e é um tanto inconsistente). Além disso, a menos que você esteja acompanhando um evento muito específico ou apenas tentando excluir algumas classes acima, usar os próprios eventos não é uma prova completa.

Por exemplo, digamos que você tenha descoberto que um usuário emitiu uma remoção de rato real (não a falsificada de eventos de toque, consulte http://www.html5rocks.com/en/mobile/touchandmouse/ ).

Então o que?

Você habilita estilos suspensos? Você adiciona mais botões?

De qualquer maneira, você está aumentando o tempo para o vidro, porque precisa esperar que um evento seja acionado.

Mas o que acontece quando o seu usuário nobre decide desconectar o mouse e entrar em contato direto com o usuário .. você espera que ele toque sua interface agora cheia e depois a altera logo que ele faz um esforço para identificar sua interface agora lotada?

Em forma de marcador, citando o stucox em https://github.com/Modernizr/Modernizr/issues/869#issuecomment-15264101

• Queremos detectar a presença de um mouse
• Ae provavelmente não pode detectar antes de um evento ser disparado
• Como tal, o que estamos detectando é se um mouse foi usado nesta sessão - não será imediatamente após o carregamento da página
• Provavelmente também não podemos detectar que não há um mouse - ele seria indefinido até ser verdadeiro (acho que isso faz mais sentido do que defini-lo como falso até prova)
• E provavelmente não podemos detectar se um mouse está desconectado no meio da sessão - isso será indistinguível do usuário que desistiu do mouse

Um aspecto à parte: o navegador sabe quando um usuário se conecta a um mouse / se conecta a um teclado, mas não o expõe ao JavaScript.

Isso deve levar você ao seguinte:

O rastreamento dos recursos atuais de um determinado usuário é complexo, não confiável e tem mérito duvidoso

A idéia de aprimoramento progressivo se aplica muito bem aqui, no entanto. Crie uma experiência que funcione sem problemas, independentemente do contexto do usuário. Em seguida, faça suposições com base nos recursos do navegador / consultas de mídia para adicionar funcionalidades que serão relativas no contexto assumido. A presença de um mouse é apenas uma das inúmeras maneiras pelas quais diferentes usuários em diferentes dispositivos experimentam seu site. Crie algo com mérito no seu kernel e não se preocupe muito com a forma como as pessoas clicam nos botões.

Que tal ouvir um evento de remoção de mouse no documento. Até ouvir esse evento, você assume que o dispositivo é apenas de toque ou teclado.

var mouseDetected = false;
function onMouseMove(e) {
  unlisten('mousemove', onMouseMove, false);
  mouseDetected = true;
  // initializeMouseBehavior();
}
listen('mousemove', onMouseMove, false);

(Onde listene unlistendelegar para addEventListenerou attachEventconforme apropriado.)

Espero que isso não leve a muito jank visual, seria péssimo se você precisar de novos layouts massivos com base no modo ...

A partir de 2018, existe uma maneira boa e confiável de detectar se um navegador possui um mouse (ou dispositivo de entrada semelhante): recursos de interação de mídia CSS4 que agora são suportados por quase qualquer navegador moderno (exceto IE 11 e navegadores móveis especiais).

W3C:

O recurso de mídia do ponteiro é usado para consultar a presença e a precisão de um dispositivo apontador, como um mouse.

Veja as seguintes opções:

    /* The primary input mechanism of the device includes a 
pointing device of limited accuracy. */
    @media (pointer: coarse) { ... }

    /* The primary input mechanism of the device 
includes an accurate pointing device. */
    @media (pointer: fine) { ... }

    /* The primary input mechanism of the 
device does not include a pointing device. */
    @media (pointer: none) { ... }

    /* Primary input mechanism system can 
       hover over elements with ease */
    @media (hover: hover) { ... }

    /* Primary input mechanism cannot hover 
       at all or cannot conveniently hover 
       (e.g., many mobile devices emulate hovering
       when the user performs an inconvenient long tap), 
       or there is no primary pointing input mechanism */
    @media (hover: none) { ... }

    /* One or more available input mechanism(s) 
       can hover over elements with ease */
    @media (any-hover: hover) { ... }


    /* One or more available input mechanism(s) cannot 
       hover (or there are no pointing input mechanisms) */
    @media (any-hover: none) { ... }

As consultas de mídia também podem ser usadas em JS:

if(window.matchMedia("(any-hover: none)").matches) {
    // do sth
}

Palavras-chave:

Documentação do W3: https://www.w3.org/TR/mediaqueries-4/#mf-interaction

Suporte para navegador: https://caniuse.com/#search=media%20features

Problema semelhante: Detecte se um dispositivo cliente suporta os estados: hover e: focus

A resposta da @ Wyatt é ótima e nos dá muito o que pensar.

No meu caso, eu escolhi ouvir a primeira interação, só então definir um comportamento. Portanto, mesmo se o usuário tiver um mouse, tratarei como dispositivo de toque se a primeira interação foi um toque.

Considerando a ordem dada na qual os eventos são processados :

1. touchstart
2. touchmove
3. toque
4. passe o rato por cima
5. ratoeira
6. mousedown
7. mouseup
8. clique

Podemos supor que, se o evento do mouse for acionado antes do toque, é um evento real do mouse, não um emulado. Exemplo (usando jQuery):

$(document).ready(function() {
    var $body = $('body');
    var detectMouse = function(e){
        if (e.type === 'mousedown') {
            alert('Mouse interaction!');
        }
        else if (e.type === 'touchstart') {
            alert('Touch interaction!');
        }
        // remove event bindings, so it only runs once
        $body.off('mousedown touchstart', detectMouse);
    }
    // attach both events to body
    $body.on('mousedown touchstart', detectMouse);
});

Isso funcionou para mim

Só é possível detectar se um navegador é capaz de tocar . Não há como saber se ele realmente possui uma tela de toque ou um mouse conectado.

Pode-se priorizar o uso ouvindo evento de toque em vez de evento de mouse se a capacidade de toque for detectada.

Para detectar o recurso de toque em vários navegadores:

function hasTouch() {
    return (('ontouchstart' in window) ||       // html5 browsers
            (navigator.maxTouchPoints > 0) ||   // future IE
            (navigator.msMaxTouchPoints > 0));  // current IE10
}

Então pode-se usar isso para verificar:

if (!hasTouch()) alert('Sorry, need touch!);

ou para escolher qual evento escutar:

var eventName = hasTouch() ? 'touchend' : 'click';
someElement.addEventListener(eventName , handlerFunction, false);

ou use abordagens separadas para toque versus não toque:

if (hasTouch() === true) {
    someElement.addEventListener('touchend' , touchHandler, false);

} else {
    someElement.addEventListener('click' , mouseHandler, false);

}
function touchHandler(e) {
    /// stop event somehow
    e.stopPropagation();
    e.preventDefault();
    window.event.cancelBubble = true;
    // ...
    return false; // :-)
}
function mouseHandler(e) {
    // sorry, touch only - or - do something useful and non-restrictive for user
}

Para o mouse, é possível detectar apenas se o mouse está sendo usado, não se existe ou não. Pode-se configurar uma bandeira global para indicar que o mouse foi detectado pelo uso (semelhante a uma resposta existente, mas um pouco simplificada):

var hasMouse = false;

window.onmousemove = function() {
    hasMouse = true;
}

(não é possível incluir mouseupou mousedownporque esse evento também pode ser acionado pelo toque)

Navegadores restringe o acesso a APIs de sistema de baixo nível, necessárias para detectar recursos como recursos de hardware do sistema em que está sendo usado.

Existe a possibilidade de talvez escrever um plug-in / extensão para acessá-los, mas via JavaScript e DOM essa detecção é limitada para essa finalidade e seria necessário escrever um plug-in específico para as várias plataformas de SO.

Portanto, em conclusão: essa detecção só pode ser estimada por um "bom palpite".

Quando as consultas de mídia nível 4 estiver disponível nos navegadores, poderemos usar as consultas "ponteiro" e "pairar" para detectar dispositivos com um mouse.

Se realmente queremos comunicar essas informações para Javascript, poderíamos usar uma consulta CSS para definir estilos específicos de acordo com o tipo de dispositivo e, em seguida, usar getComputedStyle no Javascript para ler esse estilo e derivar dele o tipo de dispositivo original.

Mas um mouse pode ser conectado ou desconectado a qualquer momento, e o usuário pode querer alternar entre o toque e o mouse. Portanto, talvez seja necessário detectar essa alteração e oferecer a alteração da interface ou fazê-lo automaticamente.

Como você planeja oferecer uma maneira de alternar entre as interfaces de qualquer maneira, seria possível simplesmente pedir ao usuário que clique em um link ou botão para "inserir" a versão correta do aplicativo? Então você pode se lembrar da preferência deles por futuras visitas. Não é de alta tecnologia, mas é 100% confiável :-)

@SamuelRossille Infelizmente, nenhum navegador que eu saiba expor a existência (ou a falta dele) de um mouse.

Então, com isso dito, nós apenas temos que tentar fazer o melhor possível com a nossa opção existente ... eventos. Eu sei que não é exatamente o que você está procurando ... concordou que atualmente está longe de ser o ideal.

Podemos fazer o possível para descobrir se um usuário está usando um mouse ou toque a qualquer momento. Aqui está um exemplo rápido e sujo usando jQuery & Knockout:

//namespace
window.ns = {};

// for starters, we'll briefly assume if touch exists, they are using it - default behavior
ns.usingTouch = ko.observable(Modernizr.touch); //using Modernizr here for brevity.  Substitute any touch detection method you desire

// now, let's sort out the mouse
ns.usingMouse = ko.computed(function () {
    //touch
    if (ns.usingTouch()) {
        //first, kill the base mousemove event
        //I really wish browsers would stop trying to handle this within touch events in the first place
        window.document.body.addEventListener('mousemove', function (e) {
            e.preventDefault();
            e.stopImmediatePropagation();
        }, true);

        //remove mouse class from body
        $('body').removeClass("mouse");

        //switch off touch listener
        $(document).off(".ns-touch");

        // switch on a mouse listener
        $(document).on('mousemove.ns-mouse', function (e) {
            if (Math.abs(window.lastX - e.clientX) > 0 || window.lastY !== e.clientY) {
                ns.usingTouch(false);  //this will trigger re-evaluation of ns.usingMouse() and result in ns.usingMouse() === true
            }
        });

        return false;
    }
    //mouse
    else {
        //add mouse class to body for styling
        $('body').addClass("mouse");

        //switch off mouse listener
        $(document).off(".ns-mouse");

        //switch on a touch listener
        $(document).on('touchstart.ns-touch', function () { ns.usingTouch(true) });

        return true;
    }
});

//tests:
//ns.usingMouse()
//$('body').hasClass('mouse');

Agora você pode vincular / assinar usingMouse () e usingTouch () e / ou estilizar sua interface com a classe body.mouse . A interface irá alternar assim que um cursor do mouse for detectado e no touchstart.

Esperamos ter em breve algumas opções melhores dos fornecedores de navegadores.

O Tera-WURFL pode informar os recursos do dispositivo que está visitando seu site , comparando a assinatura do navegador com o banco de dados. Dê uma olhada, é grátis!

Por que você simplesmente não detecta se ele tem a capacidade de detectar toques e / ou reagir aos movimentos do mouse?

// This will also return false on
// touch-enabled browsers like Chrome
function has_touch() {
  return !!('ontouchstart' in window);
}

function has_mouse() {
  return !!('onmousemove' in window);
}

Isso funcionou para mim em uma situação semelhante. Basicamente, suponha que o usuário não tenha um mouse até que você veja uma série curta de movimentos de rato consecutivos, sem interferir com mouse ou mouse. Não é muito elegante, mas funciona.

var mousedown = false;
var mousemovecount = 0;
function onMouseDown(e){
    mousemovecount = 0;
    mousedown = true;
}
function onMouseUp(e){
    mousedown = false;
    mousemovecount = 0;
}
function onMouseMove(e) {
    if(!mousedown) {
        mousemovecount++;
        if(mousemovecount > 5){
            window.removeEventListener('mousemove', onMouseMove, false);
            console.log("mouse moved");
            $('body').addClass('has-mouse');
        }
    } else {
        mousemovecount = 0;
    }
}
window.addEventListener('mousemove', onMouseMove, false);
window.addEventListener('mousedown', onMouseDown, false);
window.addEventListener('mouseup', onMouseUp, false);

Dê uma olhada no modenizr, uma de suas características é o toque

http://modernizr.com/docs/#features-misc

Embora eu não tenha testado completamente, parece funcionar muito bem

Isso também está vinculado na página modernizr http://www.html5rocks.com/en/mobile/touchandmouse/

Como outros já apontaram, detectar definitivamente se eles têm ou não um mouse não é confiável. Isso pode mudar facilmente, dependendo do dispositivo. Definitivamente, é algo que você não pode fazer de forma confiável com um valor booleano verdadeiro ou falso, pelo menos em uma escala de documento.

Os eventos de toque e mouse são exclusivos. Portanto, isso pode ajudar um pouco na tomada de ações diferentes. O problema é que os eventos de toque estão mais próximos dos eventos de cima / baixo / movimento do mouse e também acionam um evento de clique.

Na sua pergunta, você diz que deseja passar o mouse para visualizar. Além disso, não conheço outros detalhes sobre sua interface. Estou assumindo que, com a falta de um mouse, você deseja que um toque seja visualizado, enquanto um clique executa uma ação diferente por causa da visualização instantânea.

Se for esse o caso, você pode adotar uma abordagem preguiçosa para a detecção:

Um evento onclick sempre será precedido por um evento onmouseover com o mouse. Portanto, anote que o mouse está sobre o elemento que foi clicado.

Você pode fazer isso com um evento onmousemove em todo o documento. Você pode usarevent.target para registrar em qual elemento o mouse está localizado. Em seus eventos onclick, você pode verificar se o mouse está ou não sobre o elemento que está sendo clicado (ou um filho do elemento).

A partir daí, você pode optar por confiar no evento click para ambos e executar uma ação A ou B, dependendo do resultado. A ação B pode ser nada se alguns dispositivos de toque não emitem um evento de clique (em vez disso, você teria que confiar nos eventos ontouch *).

Não acho que seja possível identificar um dispositivo apenas com toque (que eu saiba, é claro). O principal problema é que todos os eventos de mouse e teclado também são disparados por dispositivos de toque. Veja o exemplo a seguir, os dois alertas retornam true para dispositivos touch.

function is_touch_present() {
  return ('ontouchstart' in window) || ('onmsgesturechange' in window);
}

function is_mouse_present() {
  return (('onmousedown' in window) && ('onmouseup' in window) && ('onmousemove' in window) && ('onclick' in window) && ('ondblclick' in window) && ('onmousemove' in window) && ('onmouseover' in window) && ('onmouseout' in window) && ('oncontextmenu' in window));
}

alert("Touch Present: " + is_touch_present());
alert("Mouse Present: " + is_mouse_present());

A melhor ideia, na minha opinião, é o mousemoveouvinte (atualmente a melhor resposta). Eu acredito que esse método precisa ser um pouco modificado. É verdade que os navegadores baseados em toque simulam até o evento mousemove, como você pode ver nesta discussão do iOS , por isso devemos ter um pouco de cuidado.

Faz sentido que os navegadores baseados em toque apenas emulem esse evento quando o usuário toca na tela (o dedo do usuário está pressionado). Isso significa que devemos adicionar um teste durante o manipulador do mouse para ver qual botão do mouse está pressionado (se houver) durante o evento. Se nenhum botão do mouse estiver pressionado, podemos assumir com segurança que um mouse real está presente. Se um botão do mouse estiver pressionado, o teste permanecerá inconclusivo.

Então, como isso seria implementado? Esta pergunta mostra que o método mais confiável para examinar qual botão do mouse está pressionado durante uma remoção de mouse é realmente escutar três eventos no nível do documento: remoção de mouse, remoção de mouse e mouse. A seta para cima e para baixo definirá apenas um sinalizador booleano global. A mudança fará o teste. Se você tiver um movimento e o booleano for falso, podemos assumir que um mouse está presente. Veja a pergunta para exemplos exatos de código.

Um comentário final. Esse teste não é ideal porque não pode ser executado em tempo de carregamento. Portanto, eu usaria um método de aprimoramento progressivo, conforme sugerido anteriormente. Por padrão, mostre uma versão que não suporta a interface de foco específico do mouse. Se um mouse for descoberto, ative esse modo em tempo de execução usando JS. Isso deve parecer o mais transparente possível para o usuário.

Para suportar alterações na configuração do usuário (ou seja, o mouse foi desconectado), você pode testar periodicamente. Embora eu acredite que seja melhor, neste caso, simplesmente notificar o usuário sobre os 2 modos e permitir que os usuários alternem manualmente entre eles (bem como a opção móvel / desktop, que sempre pode ser revertida).

Executei alguns testes em vários PCs, Linux, iPhone, telefones e guias Android. Estranho que não exista uma solução fácil à prova de balas. O problema surge quando alguns que possuem Touch e nenhum mouse ainda apresentam os eventos Touch e Mouse ao aplicativo. Como deseja suportar instâncias apenas com mouse e apenas com toque, deseja processar ambas, mas isso causa ocorrências duplas de interações do usuário. Se o mouse pode saber que o dispositivo não está presente no dispositivo, ele pode ignorar os eventos de mouse falso / inserido. Tentei definir sinalizador se MouseMove for encontrado, mas alguns navegadores lançam MouseMove falso, bem como MouseUp e MouseDown. Tentei examinar os registros de data e hora, mas achei que isso era muito arriscado. Conclusão: eu encontrei os navegadores que criavam os eventos de mouse falso sempre inseridos um único MouseMove antes da MouseDown inserida. Em 99,99% dos meus casos, ao executar em um sistema que possui um mouse real, há vários eventos MouseMove consecutivos - pelo menos dois. Portanto, controle se o sistema encontra dois eventos MouseMove consecutivos e declare que não há mouse presente se essa condição nunca for atendida. Provavelmente isso é muito simples, mas está funcionando em todas as minhas configurações de teste. Acho que vou continuar até encontrar uma solução melhor. - Jim W

Uma solução simples no jQuery para detectar o uso do mouse, que resolve o problema em que os dispositivos móveis também acionam o evento 'mousemove'. Basta adicionar um ouvinte do touchstart para remover o ouvinte do mousemove, para que ele não seja acionado ao tocar.

$('body').one('touchstart.test', function(e) {
  // Remove the mousemove listener for touch devices
  $('body').off('mousemove.test');
}).one('mousemove.test', function(e) {
  // MOUSE!
});

Obviamente, o dispositivo ainda pode ser touch AND mouse, mas o acima garante que um mouse real foi usado.

Acabei de encontrar uma solução que eu acho bastante elegante.

// flag as mouse interaction by default
var isMouse = true;

// detect a touch event start and flag it
$(window).on('touchstart', function () {
  // if triggers touchstart, toggle flag
  // since touch events come before mouse event / click
  // callback of mouse event will get in callback
  // `isMouse === false`
  isMouse = false;
});

// now the code that you want to write
// should also work with `mouse*` events
$('a.someClass').on('click', function () {
  if (isMouse) {
    // interaction with mouse event
    // ...
  } else {
    // reset for the next event detection
    // this is crucial for devices that have both
    // touch screen and mouse
    isMouse = true;

    // interaction with touch event
    // ...
  }
});

Corri para o mesmo problema, onde um único toque também foi registrado como um clique. Depois de ler os comentários das principais respostas votadas, criei minha própria solução:

var body = document.getElementsByTagName('body')[0];
var mouseCount = 0;

// start in an undefined state 
// (i use this to blend in elements once we decide what input is used)
var interactionMode = 'undefined';


var registerMouse = function() {
  // count up mouseCount every time, the mousemove event is triggered
  mouseCount++;

  // but dont set it instantly. 
  // instead wait 20 miliseconds (seems to be a good value for multiple move actions), 
  // if another mousemove event accoures switch to mouse as interaction 
  setTimeout(function() {
    // a touch event triggers also exactly 1 mouse move event.
    // So only if mouseCount is higher than 1 we are really moving the cursor by mouse.
    if (mouseCount > 1) {
      body.removeEventListener('mousemove', registerMouse);
      body.removeEventListener('touchend', registerTouch);

      interactionMode = 'mouse';
      console.log('now mousing');
      listenTouch();
    }

    // set the counter to zero again
    mouseCount = 0;
  }, 20);
};

var registerTouch = function() {
  body.removeEventListener('mousemove', registerMouse);
  body.removeEventListener('touchend', registerTouch);

  interactionMode = 'touch';
  console.log('now touching');
  mouseCount = 0;

  listenMouse();
};

var listenMouse = function() {
  body.addEventListener("mousemove", registerMouse);
};
var listenTouch = function() {
  body.addEventListener("touchend", registerTouch);
};

listenMouse();
listenTouch();

// after one second without input, assume, that we are touching
// could be adjusted to several seconds or deleted
// without this, the interactionMode would stay 'undefined' until first mouse or touch event
setTimeout(function() {
  if (!body.classList.contains('mousing') || body.classList.contains('touching')) {
    registerTouch();
  }
}, 1000);

/* fix, so that scrolling is possible */

html,
body {
  height: 110%;
}

Mouse or touch me

O único problema que encontrei é que você precisa poder rolar para detectar corretamente um evento de toque. uma única guia (toque) pode causar problemas.

Passei horas descobrindo esse problema para o meu aplicativo Phonegap e criei esse hack. Ele gera um aviso do console se o evento acionado for um evento "passivo", o que significa que não aciona nenhuma alteração, mas funciona! Eu estaria interessado em alguma idéia para melhorar ou um método melhor. Mas isso efetivamente permite que eu use $ .touch () universalmente.

$(document).ready(function(){
  $("#aButton").touch(function(origElement, origEvent){
    console.log('Original target ID: ' + $(origEvent.target).attr('id'));
  });
});

$.fn.touch = function (callback) {
    var touch = false;
    $(this).on("click", function(e){
        if (!touch)
        {
            console.log("I click!");
            let callbackReal = callback.bind(this);
            callbackReal(this, e);
        }else{
            touch = true;
        }
        touch = false;
    });
    $(this).on("touchstart", function(e){
        if (typeof e.touches != typeof undefined)
        {
            e.preventDefault();
            touch = true;
            console.log("I touch!");
            let callbackReal = callback.bind(this);
            callbackReal(this, e);
        }
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="aButton">A Button</button>

o principal problema que vejo aqui é que a maioria dos dispositivos de toque aciona um evento de mouse junto com o toque de resposta correspondente (touchstart -> mousedown, touchmove -> mousemove, etc.). Para apenas os teclados, finalmente os modernos, eles têm um navegador genérico, portanto você não consegue nem detectar a presença da classe MouseEvent.

A solução menos dolorosa aqui seria, na minha opinião, exibir um menu no lançamento (com gerenciamento 'alt' apenas para usuários do teclado) e talvez armazenar a opção com localStorage / cookies / serverside ou então manter a mesma escolha na próxima hora que o visitante chega.

Eu recomendo fortemente contra essa abordagem. Considere dispositivos com tela de toque e do tamanho de desktops e você tem um conjunto diferente de problemas para resolver.

Torne seu aplicativo utilizável sem o mouse (ou seja, sem visualização instantânea).

Gostaria de recomendar um script que me ajudou:

Eu tinha lido e tentado tudo o que era sugerido, sem resultados suficientes.

Então eu investiguei um pouco mais e encontrei este código - device.js

Estou usando isso no site do meu cliente, para detectar a existência do mouse:
( <html>deve ter desktopclasse) e parece muito bom, e para touchsuporte, eu apenas faço a verificação regular 'ontouchend' in documente uso as informações de ambas as detecções para assumir uma coisa específica de que preciso.

Geralmente, é uma idéia melhor detectar se a função de mouseover é suportada em vez de detectar o tipo de SO / navegador. Você pode fazer isso simplesmente da seguinte maneira:

if (element.mouseover) {
    //Supports the mouseover event
}

Certifique-se de não fazer o seguinte:

if (element.mouseover()) {
    // Supports the mouseover event
}

Este último chamaria o método, em vez de verificar sua existência.

Você pode ler mais aqui: http://www.quirksmode.org/js/support.html