Chrome 47 ha una nuova funzionalità che semplifica la comprensione del modo in cui gli utenti interagiscono con il tuo sito: InputDeviceCapabilities. Facciamo un passo indietro e vediamo perché è importante.
Gli eventi di input DOM sono un'astrazione rispetto agli eventi di input di basso livello, a cui sono associati in modo libero
all'input del dispositivo fisico (ad es. Gli eventi click possono essere attivati da mouse,
touchscreen o tastiera). Tuttavia, c'è un problema: non esiste un metodo semplice
per ottenere i dettagli del dispositivo fisico responsabile di un evento.
Inoltre, alcuni tipi di input possono generare ulteriori eventi di input DOM "fasulli" per motivi di compatibilità. Uno di questi eventi DOM falsi si verifica quando un utente tocca un touchscreen (ad esempio su un cellulare); non attiva solo eventi touch ma, per motivi di compatibilità, anche eventi del mouse.
Questo causa problemi agli sviluppatori quando supportano sia l'input tramite mouse che tramite tocco. È
difficile sapere se un evento mousedown rappresenta in realtà un nuovo input di un mouse o
è semplicemente un evento di compatibilità per un evento touchstart elaborato in precedenza.
La nuova API InputDeviceCapabilities fornisce dettagli sulle origini sottostanti degli eventi di input tramite un oggetto sourceCapabilities in UIEvent.
L'oggetto ha una proprietà firesTouchEvents impostata su true o false in base a come l'evento è stato generato dall'azione utente.
La domanda è: dove deve essere utilizzata?
Al di fuori degli eventi puntatore, molti sviluppatori oggi gestiscono la logica per l'interazione nel livello tocco, impedendo a Impostazione predefinita di evitare inizialmente di creare eventi mouse"fake". Questo design funziona bene in molti scenari e non deve essere modificato per sfruttare InputDeviceCapabilities.
In alcuni casi, però, non è consigliabile impedire l'impostazione predefinita dell'evento tocco; ad esempio, è possibile che i tocchi inviino eventi di "clic" e cambino lo stato attivo. In questi casi, le informazioni contenute nella proprietà MouseEvent.sourceCapabilities.firesTouchEvents ti consentono di iniziare a consolidare la logica degli eventi basati su tocco e mouse in un modello simile a come gestiresti la logica con gli eventi puntatore. In altre parole, puoi avere un solo set di codice che gestisce la logica dell'interazione e fornisce agli sviluppatori un modo più semplice per condividere la logica tra i browser che supportano e non supportano gli eventi puntatore.
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 è stato Polyfilled di Rick Byers per poterlo utilizzare sulla maggior parte delle piattaforme.
Attualmente questa API è minima e si concentra sulla risoluzione di un problema specifico riguardante l'identificazione degli eventi del mouse derivanti da eventi tocco.
È anche possibile creare un'istanza di InputDeviceCapabilities; tuttavia, contiene solo firesTouchEvents. In futuro è prevista un'espansione per consentirti di ottenere maggiori informazioni su tutti i dispositivi di input nel sistema di un utente. Ci piacerebbe ricevere il tuo feedback sui casi d'uso.