O Chrome 47 tem um novo recurso que facilita a compreensão de como os usuários interagimos com seu site: InputDeviceCapabilities. Vamos dar um tempo e aprender por que isso é importante.
Os eventos de entrada do DOM são uma abstração acima dos eventos de entrada de baixo nível, vinculados de forma imprecisa
à entrada do dispositivo físico (por exemplo, Os eventos click podem ser acionados por um mouse,
tela touchscreen ou teclado). No entanto, há um problema: não há um método simples
para conseguir os detalhes do dispositivo físico responsável por um evento.
Além disso, determinados tipos de entrada podem gerar outros eventos de entrada "falsos" do DOM por motivos de compatibilidade. Um desses eventos DOM falsos acontece quando um usuário toca em uma tela touchscreen (como em um smartphone). Ele não aciona apenas eventos de toque, mas, por motivos de compatibilidade, também eventos de mouse.
Isso causa problemas para os desenvolvedores ao oferecer suporte a entradas de mouse e toque. É
difícil saber se um evento mousedown representa realmente uma nova entrada de um mouse ou
é apenas um evento de compatibilidade para um evento touchstart processado anteriormente.
A nova API InputDeviceCapabilities fornece detalhes sobre as origens
de eventos de entrada por um objeto sourceCapabilities no UIEvent.
O objeto tem uma propriedade firesTouchEvents definida como true ou false com base em como
o evento foi gerado pela ação do usuário.
A pergunta é: onde isso deve ser usado?
Fora dos eventos de ponteiro, muitos desenvolvedores hoje lidam com a lógica de interação na camada de toque, impedindo que o padrão evite criar eventos "falsos" do mouse.Esse design funciona bem em muitos cenários e não precisa mudar para aproveitar InputDeviceCapabilities.
No entanto, em alguns casos, você não quer preventDefault o evento de toque.
Por exemplo, você ainda quer que os toques enviem eventos de "clique" e mudem o foco. Nesses
casos, as informações armazenadas na propriedade
MouseEvent.sourceCapabilities.firesTouchEvents permitem que você comece a
consolidar a lógica de eventos baseados em toque e mouse em um modelo
semelhante ao modo como você gerenciaria a lógica com eventos de ponteiro. Ou seja, você pode
ter apenas um conjunto de código que gerencia a lógica de interação e oferece aos desenvolvedores
uma maneira mais simples de compartilhar a lógica entre navegadores que oferecem e não oferecem suporte a eventos de ponteiro.
function addMouseEventListener(target, type, handler, capture) {
target.addEventListener(type, function(e) {
if (e.sourceCapabilities.firesTouchEvents)
return false;
return handler(e);
}, capture);
}
A boa notícia é que ele foi preenchido por Rick Byers para que você possa usá-lo na maioria das plataformas.
Atualmente, essa API é mínima e focada em resolver um problema específico com a identificação de eventos de mouse derivados de eventos de toque.
É possível até mesmo instanciar uma instância de InputDeviceCapabilities.
No entanto, ela só contém firesTouchEvents. No futuro, a expectativa é que ele seja
expandido
para que você entenda melhor todos os dispositivos de entrada no sistema de um
usuário. Queremos receber seu feedback sobre
casos de uso.