Chrome 47 tiene una nueva función que facilita la comprensión de cómo los usuarios interactúan con tu sitio: InputDeviceCapabilities. Retrocedamos un poco y veamos por qué es importante.
Los eventos de entrada del DOM son una abstracción por sobre los eventos de entrada de bajo nivel, vinculados de forma imprecisa a la entrada del dispositivo físico (p.ej., Los eventos click se pueden activar con un mouse, una pantalla táctil o un teclado). Sin embargo, hay un problema: no hay un método simple para obtener los detalles del dispositivo físico responsable de un evento.
Además, ciertos tipos de entradas pueden generar más eventos de entrada "falsos" del DOM por motivos de compatibilidad. Uno de esos eventos DOM falsos ocurre cuando un usuario presiona una pantalla táctil (como en un teléfono celular). No solo activa eventos táctiles, sino también eventos del mouse por motivos de compatibilidad.
Esto genera problemas para los desarrolladores cuando admiten entradas táctiles y del mouse. Es difícil saber si un evento mousedown representa una entrada nueva de un mouse o es solo un evento de compatibilidad para un evento touchstart procesado anteriormente.
La nueva API de InputDeviceCapabilities proporciona detalles sobre las fuentes subyacentes de los eventos de entrada a través de un objeto sourceCapabilities en UIEvent.
El objeto tiene una propiedad firesTouchEvents que se establece en true o false según cómo
generó el evento la acción del usuario.
La pregunta es: ¿Dónde se debe usar?
Fuera de los eventos del puntero, muchos desarrolladores hoy en día controlan la lógica de la interacción en la capa táctil, lo que evita que Default evite crear eventos del mouse "falsos" en primer lugar.Este diseño funciona bien en muchas situaciones y no es necesario cambiarlo para aprovechar InputDeviceCapabilities.
Sin embargo, en algunos casos, no quieres preventDefault el evento táctil. Por ejemplo, aún quieres que las presiones envíen eventos de "clic" y cambien el enfoque. En estos casos, la información que se almacena en la propiedad MouseEvent.sourceCapabilities.firesTouchEvents te permite comenzar a consolidar la lógica de los eventos táctiles y basados en el mouse en un modelo que es similar a la forma en que administrarías la lógica con eventos de puntero. Es decir, puedes tener un solo conjunto de código que administre la lógica de interacción y les proporcione a los desarrolladores una forma más sencilla de compartir la lógica entre navegadores que admiten y no admiten eventos del puntero.
function addMouseEventListener(target, type, handler, capture) {
target.addEventListener(type, function(e) {
if (e.sourceCapabilities.firesTouchEvents)
return false;
return handler(e);
}, capture);
}
La buena noticia es que Rick Byers completó el código para que puedas usarlo en la mayoría de las plataformas.
Actualmente, esta API es mínima y se enfoca en resolver un problema específico con la identificación de eventos del mouse derivados de eventos táctiles.
Incluso es posible crear una instancia de InputDeviceCapabilities.
Sin embargo, solo contiene firesTouchEvents. En el futuro, se espera que se amplíe para que puedas obtener más información sobre todos los dispositivos de entrada del sistema de un usuario. Nos encantaría recibir tus comentarios sobre los casos de uso.