Kemampuan perangkat input

Paul Kinlan

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 adalah abstraksi di atas peristiwa input level rendah, yang terkait secara longgar dengan input perangkat fisik (mis., Peristiwa click dapat diaktifkan oleh mouse, layar sentuh, atau keyboard). Namun, ada masalah: tidak ada metode sederhana untuk mendapatkan detail perangkat fisik yang bertanggung jawab atas peristiwa.

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

Hal ini menyebabkan masalah bagi developer saat mendukung input mouse dan sentuh. Sulit untuk mengetahui apakah peristiwa mousedown benar-benar mewakili input baru dari mouse, atau hanya 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 memiliki properti firesTouchEvents yang ditetapkan ke true atau false berdasarkan cara peristiwa dihasilkan oleh tindakan pengguna.

Pertanyaannya adalah: Di mana kode ini 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 dalam banyak skenario dan tidak perlu diubah untuk memanfaatkan InputDeviceCapabilities.

Namun, dalam beberapa skenario, Anda benar-benar tidak ingin preventDefault peristiwa sentuh; misalnya, Anda masih ingin ketukan mengirim peristiwa 'klik' dan mengubah fokus. Untuk kasus ini, informasi yang disimpan di properti MouseEvent.sourceCapabilities.firesTouchEvents memungkinkan Anda mulai menggabungkan logika untuk peristiwa berbasis sentuh dan mouse ke dalam model yang mirip dengan cara Anda mengelola logika dengan Peristiwa Pointer. Artinya, Anda dapat memiliki satu kumpulan kode yang mengelola logika interaksi dan memberi developer cara yang lebih sederhana untuk berbagi logika di 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 adalah ini telah Di-Polyfill oleh Rick Byers sehingga Anda dapat menggunakannya di sebagian besar platform.

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