Kemampuan perangkat input

Chrome 47 memiliki fitur baru yang memudahkan Anda memahami cara pengguna berinteraksi dengan situs Anda: InputDeviceCapabilities. Mari kita mundur sedikit dan pelajari mengapa hal ini penting.

Peristiwa input DOM merupakan abstraksi di atas peristiwa input level rendah, yang terikat longgar dengan input perangkat fisik (misalnya, Peristiwa click dapat diaktifkan oleh mouse, layar sentuh, atau keyboard). Namun, ada masalah: tidak ada metode sederhana untuk mendapatkan detail perangkat fisik yang menyebabkan suatu peristiwa.

Selain itu, jenis input tertentu dapat menghasilkan peristiwa input DOM "palsu" lebih lanjut karena alasan kompatibilitas. Salah satu peristiwa DOM palsu terjadi saat pengguna mengetuk layar sentuh (misalnya pada ponsel); peristiwa ini tidak hanya memicu peristiwa sentuh, tetapi juga untuk alasan kompatibilitas.

Hal ini menyebabkan masalah bagi developer saat mendukung input mouse dan sentuh. Sangat sulit untuk mengetahui apakah peristiwa mousedown benar-benar mewakili input baru dari mouse, atau hanyalah peristiwa kompatibilitas untuk peristiwa touchstart yang diproses sebelumnya.

InputDeviceCapabilities API baru memberikan detail tentang sumber peristiwa input yang mendasarinya melalui objek sourceCapabilities di UIEvent.
Objek ini memiliki properti firesTouchEvents yang ditetapkan ke true atau false berdasarkan cara peristiwa dihasilkan oleh tindakan pengguna.

Pertanyaannya adalah: Di mana harus digunakan?

Di luar Peristiwa Pointer, banyak developer saat ini menangani logika untuk interaksi di lapisan sentuh, sehingga mencegah Default untuk menghindari pembuatan peristiwa mouse "palsu" sejak awal.Desain ini berfungsi dengan baik di banyak skenario dan tidak perlu diubah untuk memanfaatkan InputDeviceCapabilities.

Namun, dalam beberapa skenario, Anda mungkin tidak ingin preventDefault peristiwa sentuh; misalnya, Anda masih ingin mengetuk untuk mengirim peristiwa 'klik' dan mengubah fokus. Untuk kasus ini, informasi yang disimpan di properti MouseEvent.sourceCapabilities.firesTouchEvents memungkinkan Anda untuk mulai menggabungkan logika untuk peristiwa berbasis sentuh dan mouse menjadi model yang serupa dengan cara Anda mengelola logika dengan Peristiwa Pointer. Artinya, Anda hanya dapat memiliki satu set kode yang mengelola logika interaksi dan memberi developer cara yang lebih sederhana untuk berbagi logika antara browser yang mendukung dan tidak mendukung Peristiwa Pointer.

function addMouseEventListener(target, type, handler, capture) {  
    target.addEventListener(type, function(e) {  
    if (e.sourceCapabilities.firesTouchEvents)  
        return false;  
    return handler(e);  
    }, capture);  
}

Kabar baiknya, versi ini telah Polyfilled oleh Rick Byers sehingga Anda bisa menggunakannya di sebagian besar platform.

Saat ini, API ini bersifat minimal, yang berfokus pada pemecahan masalah tertentu dengan mengidentifikasi peristiwa mouse yang berasal dari peristiwa sentuh. Anda bahkan dapat membuat instance InputDeviceCapabilities; tetapi hanya berisi firesTouchEvents. Di masa mendatang, Anda diharapkan dapat memperluas agar Anda lebih memahami semua perangkat input di sistem pengguna. Kami ingin mendapatkan masukan Anda tentang kasus penggunaan.