Detección de capacidades del navegador y eventos selectivos para el mouse y toque

Question

Empecé a usar eventos táctiles por un tiempo, pero me encontré con un problema bastante grande. Hasta ahora, verifiqué si las capacidades táctiles son compatibles y apliqué eventos selectivos basados ​​en eso. De esta manera:

if(document.ontouchmove === undefined){ 
    //apply mouse events 
}else{ 
    //apply touch events 
} 

Sin embargo, mis scripts dejaron de funcionar en Chrome5 (que actualmente es beta) en mi computadora. Investigué un poco, y como esperaba, en Chrome5 (a diferencia de Chrome anterior, Firefox, IE, etc.) document.ontouchmove ya no es undefined sino null.

Al principio quería enviar un informe de error, pero luego me di cuenta: hay dispositivos que tienen capacidades de mouse y táctil, por lo que es natural, quizás Chrome ahora lo define porque mi sistema operativo podría admitir ambos tipos de eventos .

Por lo tanto, las soluciones parecen fáciles: aplique AMBOS tipos de eventos. ¿Derecha?

Bueno, el problema ahora tiene lugar en el móvil. Para ser compatible con versiones anteriores y admitir scripts que solo usan eventos de mouse, los navegadores de dispositivos móviles pueden intentar dispararlos también (al tacto). Entonces, con los eventos mouse y touch establecidos, un determinado controlador podría ser llamado dos veces cada vez.

¿Cuál es la forma de abordar esto? ¿Hay una mejor manera de verificar y aplicar eventos selectivos, o debo ignorar los problemas que podrían ocurrir si los exploradores disparan los eventos táctiles y de mouse a veces?

Answer 1

Intente crear un elemento ficticio y adjuntarle un controlador de eventos táctiles, luego verifique si el controlador es de tipo "función". Sin embargo, esto no es infalible, ya que algunos navegadores permitirán manipuladores táctiles de eventos aunque se ejecuten en un dispositivo sin contacto, pero es probable que estén lo más cerca posible. Por lo tanto, algo como esto:

var hasTouch = function() { 
    var dummy = document.createElement("div"); 
    dummy.setAttribute("ontouchmove", "return;"); 
    return typeof dummy.ontouchmove == "function" ? true : false; 
} 

Happy coding!

Answer 2

Intenta deshabilitar los eventos del mouse si se activan los eventos táctiles?

ej .:

 
function touch_events() { 
document.onmousemove = null; 
... 
} 

function mouse_events() { ... } 

document.ontouchmove = touch_events; 
document.onmousemove = mouse_events; 

Answer 3

Es esto demasiado obvio?

if(document.ontouchmove !== undefined || document.ontouchmove == null){ 
    //apply touch events 
}else{ 
    //apply mouse events 
} 

Answer 4

var support_touch = (typeof Touch == "object");

Answer 5

Similar a la respuesta de Ola, he encontrado solo un simple detector pero también me parece que en particular los dispositivos Android (como el incendio) no siempre tienen este evento definido - esto funciona bien para mí:

//detect capabilities 
this.is_touch_device = ('ontouchstart' in document.documentElement) || (navigator.userAgent.match(/ipad|iphone|android/i) != null); 

//if so do somemthing 
if (this.is_touch_device) { 
    //like publishing a custom event 
} 

(probablemente una mejor manera de hacer esto :)

Answer 6

Did I consigue este mal, o lo hicieron todos los envíos que hasta ahora aquí responder a una pregunta que usted no solicitó? Al menos ahora tiene muchas maneras alternativas de verificar eventos compatibles :)

De todos modos, con respecto a su pregunta: Yo diría que depende de lo que está construyendo. Supongo que cuando escribes "eventos selectivos aplicados basados ​​en eso" ¿te refieres a agregar Oyentes de evento y Manipuladores? También supongo que no estás tratando con multitouch (todavía)?

En general, si desea que su aplicación funcione con ambos tipos de eventos de entrada, no tiene más remedio que registrar oyentes para todos esos. Puede que ya esté utilizando el mismo controlador para touchstart y mousedown, por lo que es el lugar en el que me aseguraré de que solo uno de los sucesos idénticos subsiguientes se procese realmente (para guardar ciclos de CPU y rediseños, así como para evitar posibles efectos secundarios).

Cuando se trata de dispositivos táctiles, hablando de un solo toque, puedo ver que mi teléfono de nivel 10 (2.3.3) genera ambos eventos: los eventos del mouse, la web "clásica" (todos esos onmousedown -eventos, etc. ..) funcionará, los eventos táctiles ... bueno, porque aparentemente es un dispositivo táctil. Pero solo verificar si la API de JavaScript admite TouchEvents no le dice nada sobre el dispositivo de entrada, por ejemplo: el navegador rekonq en el escritorio de kubuntu devuelve verdadero para los ejemplos anteriores, pero nunca los activará a menos que se use con una pantalla táctil.

Tal vez contar dispositivos separados a través de window.navigator.userAgent sería un enfoque más viable?