Chrome 47 include una nuova funzionalità che semplifica la comprensione del modo in cui gli utenti interagiscono con il tuo sito: InputDeviceCapabilities. Facciamo un passo indietro e scopriamo perché è importante.
Gli eventi di input DOM sono un'astrazione sopra gli eventi di input di basso livello, legati in modo approssimativo all'input del dispositivo fisico (ad es. click possono essere attivati da un mouse, un touchscreen o una tastiera). Tuttavia, c'è un problema: non esiste un metodo semplice per ottenere i dettagli del dispositivo fisico responsabile di un evento.
Inoltre, per motivi di compatibilità, alcuni tipi di input possono generare ulteriori eventi "falsi" di input DOM. Uno di questi eventi DOM falsi si verifica quando un utente tocca un touchscreen (ad esempio su un cellulare); non solo attiva gli eventi di tocco, ma, per motivi di compatibilità, anche gli eventi del mouse.
Ciò causa problemi agli sviluppatori quando supportano sia l'input del mouse sia quello tocco. È
difficile sapere se un evento mousedown rappresenta effettivamente un nuovo input da un mouse o
è solo un evento di compatibilità per un evento touchstart elaborato in precedenza.
La nuova API InputDeviceCapabilities fornisce dettagli sulle origini di base degli eventi di input tramite un oggetto sourceCapabilities nell'UIEvent.
L'oggetto ha una proprietà firesTouchEvents impostata su true o false in base a come l'evento è stato generato dall'azione dell'utente.
La domanda è: dove deve essere utilizzato?
A parte gli eventi relativi al cursore, oggi molti sviluppatori gestiscono la logica di interazione nel livello tocco, impedendo a Default di evitare di creare eventi del mouse "falsi" in primo luogo.Questo design funziona bene in molti scenari e non deve essere modificato per sfruttare InputDeviceCapabilities.
Tuttavia, in alcuni scenari non vuoi davvero preventDefault dell'evento touch.
Ad esempio, vuoi comunque che i tocchi inviino eventi "click" e cambino lo stato attivo. Per
questi casi, le informazioni memorizzate nella proprietà MouseEvent.sourceCapabilities.firesTouchEvents ti consentono di iniziare
a consolidare la logica per gli eventi basati su tocco e mouse in un modello
simile a come gestiresti la logica con gli eventi relativi al cursore. In altre parole, puoi avere un solo insieme di codice che gestisce la logica di interazione e offre agli sviluppatori un modo più semplice per condividere la logica tra i browser che supportano e non supportano gli eventi relativi al cursore.
function addMouseEventListener(target, type, handler, capture) {
target.addEventListener(type, function(e) {
if (e.sourceCapabilities.firesTouchEvents)
return false;
return handler(e);
}, capture);
}
La buona notizia è che questa funzionalità è stata implementata con il polyfill da Rick Byers, quindi puoi utilizzarla sulla maggior parte delle piattaforme.
Attualmente questa API è minima e incentrata sulla risoluzione di un problema specifico relativo all'identificazione degli eventi del mouse derivati dagli eventi tocco.
È persino possibile creare un'istanza di InputDeviceCapabilities, ma contiene solo firesTouchEvents. In futuro, è previsto di
espanderlo
per consentirti di saperne di più su tutti i dispositivi di input sul sistema di un
utente. Saremmo lieti di ricevere il tuo feedback sui
casi d'uso.