touchIt.js
Testar se a interação do usuário ocorre via mouse ou toque.
https://github.com/jbeee/touchIt
(baseado no método ‘Poke IT’ de Stu Cox)
Este widget foi uma tentativa de resolver o maior problema que assola a humanidade na história de todos os tempos:
era um mouse ou um dedo?
A detecção da capacidade de toque em geral tem levantado problemas em todo o lugar.
– http://www.stucox.com/blog/you-cant-detect-a-touchscreen
– https://github.com/Modernizr/Modernizr/issues/54
Portanto, se forem usados, devem ser usados com muito cuidado. Os sites ainda devem permanecer relativamente funcionais, mesmo se a detecção de toque / mouse falhar
- O problema dos telefones com Windows não foi resolvido com este widget … ou qualquer plugin / método que encontrei.
- Os eventos de toque NÃO são suportados pelo Firefox (a partir da v. 24) ou Safari (nunca)
- Teste limitado em dispositivos iOS
Os primeiros testes (os testes com falha) não são definitivos de nada.
Eles são incluídos para integridade, não funcionalidade.
Se você decidir incorporar o widget ou a lógica em seu projeto, remova-os.
Os testes de falha:
teste de agente de usuário
Verifique o que o navegador pensa que é (ou quer que você pense que é)
Por que falha:
isso realmente não diz nada sobre um laptop com capacidade de toque,
mas se sinalizar ipad / iphone / blackberry / android, então somente toque é uma aposta segura. Esconda seus eventos de navegação! Esconda todos eles.
No entanto, existem desktops com capacidade de toque e o userAgent pode ser falsificado.
HULU.com verifica se você está em um telefone / tablet ou um computador através do userAgent
Então, se você gostaria de assistir o Hulu no seu telefone e não quer pagar pelo hulu plus,
basta alterar o useragent do seu navegador para ‘desktop. ‘
tem capacidade de toque
A solução modernizr atual para detecção de toque verifica se touch.events
existe, verificando se ontouchstart existe
Por que falha:
sabe-se que os navegadores móveis geram falsos negativos, e os navegadores de desktop, falsos positivos. Além disso, nas versões do IE onde o toque é suportado, o ponteiro sempre existe, mas o tipo de ponteiro não é conhecido até o evento disparar: https://coderwall.com/p/mfreca
E, o mais importante, em muitos dispositivos modernos, o mouse e o toque não são mutuamente exclusivos! http://gadgets.ndtv.com/laptops/features/ces-2014-hybrids-laptops-and-ultrabooks-roundup-469808
Idealmente, a IU deve responder a cada um apropriadamente, mas nunca assumir nada.
O site ainda deve estar razoavelmente funcional se tudo der errado.
As pessoas do HTML5 concordam: http://www.html5rocks.com/en/mobile/touchandmouse
relação altura / largura e modo retrato
Verifique o sinalizador de media querie para o modo protrait ou verifique se altura> largura.
Por que falha:
– Se a largura for inferior a 800 px, o usuário provavelmente está usando um telefone.
– Se estiver no modo retrato, provavelmente é um tablet / telefone.
– No entanto, a janela pode ser redimensionada em um dispositivo com recurso de toque, e
muitos laptops com recurso de toque / mouse possuem detecção de orientação.
A solução proposta:
Ouça touch.events, mouse.events e MS IE pointer.events
- Se um evento de toque / (sem ponteiro do tipo mouse) for detectado, habilite as funções de toque e oculte suas focalizações (e outras funções somente do mouse)
- Se um evento mouse / (pointer.type == mouse) for detectado, faça as coisas apenas com o mouse.
Como o webkit touch.events também lança mouse.events, uma função com um tempo limite rápido bloqueia a captura de mouse.events imediatamente após touch.events serem disparados para evitar o falso mouse.event positivo
A desvantagem é que ele deve continuar ouvindo. (Embora isso possa ser desativado por meio de options.keepWatching) Não é a coisa mais eficiente do mundo, mas no caso de seu usuário passar
do mouse para o toque e de volta para o mouse, você está protegido
O evento pode / deve ser regulado ou talvez até depurado (options.throttleWatch)
Eu apenas não implementei essa parte ainda. Se alguém quiser ajudar …