Eventos de Toque

É possível criar aplicativos sensíveis ao toque que funcionam em diversos dispositivos móveis Navegadores desktop com suporte a toque estão quase chegando; prepare-se agora Surgiu pela primeira vez no Safari Mobile para iOS 2.0 Quatro eventos básicos: touchstart touchmove touchend touchcancel Campos do objeto Event: touches targetTouches changedTouches teclas modificadoras (shift, alt, ctrl, meta) Campos do objeto Touch: identifier clientX/Y pageX/Y screenX/Y Agora é um Rascunho de Trabalho do W3C Ainda existem muitas diferenças entre fornecedores: touchenter / touchleave ( Firefox , Blackberry ) gesturestart / gesturechange / gestureend (Safari Mobile) MSPointer* / MSGesture* (IE10) Comportamento nativo Dispositivos com métodos de entrada alternativos Multitoque O FF6+ oferece suporte a eventos de toque no estilo W3C O IE10 possui MSPointer* / MSGesture* Ainda sem suporte no WebKit Desativar o tratamento padrão de gestos (panorâmica / zoom / rolagem) e document.body.addEventListener(‘touchmove’, function(event) { event.preventDefault(); }, false); Desativar o tratamento padrão de gestos (panorâmica / zoom / rolagem) Gerenciar a renderização em um loop: var touches = [], // também poderia usar requestAnimationFrame() aqui renderLoop = setInterval(function() { draw(touches); // chamar nossa função de desenho }, 15); myElement.addEventListener(‘touchmove’, function(e) { touches = e.touches; }, false); Desativar o tratamento padrão de gestos (panorâmica / zoom / rolagem) Gerenciar a renderização em um loop Oferecer suporte a dispositivos de toque único (ex.: smartphones Android) Desativar o tratamento padrão de gestos (panorâmica / zoom / rolagem) Gerenciar a renderização em um loop Oferecer suporte a dispositivos de toque único (ex.: smartphones Android) Gerenciar eventos de mouse para: Smartphones com hardware de ponteiro físico (ex.: muitos aparelhos Android) Smartphones sem eventos de toque (ex.: Windows Phone 7) Navegadores desktop sem suporte a toque (ex.: Chrome) Desativar o tratamento padrão de gestos (panorâmica / zoom / rolagem) Gerenciar a renderização em um loop Oferecer suporte a dispositivos de toque único (ex.: smartphones Android) Gerenciar eventos de mouse Oferecer suporte a navegadores desktop habilitados para toque: Firefox (eventos de toque no estilo W3C) IE10 (MSPointer*) @ @ggoodale