Capacidades del dispositivo de entrada

Chrome 47 tiene una nueva función que facilita la comprensión de la forma en que los usuarios interactúan con tu sitio: InputDeviceCapabilities. Retrocedamos un poco y aprendamos por qué esto es importante.

Los eventos de entrada del DOM son una abstracción por encima de los eventos de entrada de bajo nivel, que están estrechamente vinculados 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, existe un problema: no existe un método simple para obtener los detalles del dispositivo físico responsable de un evento.

Además, algunos tipos de entrada pueden generar más eventos de entrada de DOM "falsos" por motivos de compatibilidad. Uno de esos eventos falsos del DOM ocurre cuando un usuario presiona una pantalla táctil (por ejemplo, en un teléfono celular). No solo activa eventos táctiles, sino también eventos del mouse, por razones de compatibilidad.

Esto genera problemas para los desarrolladores cuando admiten el mouse y la entrada táctil. Es difícil saber si un evento mousedown representa una entrada nueva de un mouse o si solo es un evento de compatibilidad de un evento touchstart procesado anteriormente.

La nueva API de InputDeviceCapabilities proporciona detalles sobre las fuentes subyacentes de 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 la forma en que la acción del usuario generó el evento.

La pregunta es: ¿dónde debería usarse esto?

Fuera de los eventos de puntero, muchos desarrolladores actualmente se encargan de la lógica de la interacción en la capa táctil, lo que evita que la configuración predeterminada genere eventos de mouse "falsos" en primer lugar.Este diseño funciona bien en muchas situaciones y no necesita cambiar para aprovechar InputDeviceCapabilities.

Sin embargo, en algunos casos, no se recomienda evitar el evento táctil de manera predeterminada; por ejemplo, quieres que las presiones envíen eventos de clic y cambien el enfoque. En estos casos, la información de la propiedad MouseEvent.sourceCapabilities.firesTouchEvents te permite comenzar a consolidar la lógica para los eventos basados en el tacto y el mouse en un modelo similar al modo en que administrarías la lógica con eventos de puntero. Es decir, puedes tener solo un conjunto de código que administre la lógica de interacción y proporcione a los desarrolladores una forma más sencilla de compartir la lógica entre los navegadores que admiten y no eventos de 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 lo implementó en Polyfilled para que puedas usarlo en la mayoría de las plataformas.

En la actualidad, 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 una instancia de InputDeviceCapabilities. Sin embargo, solo contiene firesTouchEvents. En el futuro, se espera que la expansión te permita comprender mejor todos los dispositivos de entrada del sistema de un usuario. Nos encantaría recibir tus comentarios sobre casos de uso.