PointerEvent vs TouchEvent: Input Trackpad di Browser

Seorang pengembang yang membuat deteksi cubitan dua jari menggunakan TouchEvent listener akan mengirimkan kode yang bekerja sempurna di ponsel Android dan diam-diam tidak melakukan apa-apa di laptop Windows. Alasannya bersifat arsitektural, bukan bug browser: trackpad desktop sama sekali tidak memicu TouchEvent. Mengetahui event apa yang sebenarnya dihasilkan oleh setiap perangkat input — dan mengapa — adalah prasyarat untuk menulis kode gesture yang bekerja lintas kategori perangkat.

Apa itu PointerEvent dan TouchEvent

TouchEvent adalah API yang lebih tua dari keduanya. Diperkenalkan untuk menangani input jari pada layar sentuh mobile, API ini mengirimkan daftar kontak aktif (touches, targetTouches, changedTouches) melalui event bernama touchstart, touchmove, touchend, dan touchcancel. Setiap entri dalam daftar tersebut adalah objek Touch dengan koordinat dan pengenal sendiri. API ini dirancang khusus untuk layar sentuh, dan asalnya terlihat jelas: tidak ada konsep mouse, stylus, atau trackpad.

PointerEvent adalah pengganti terpadu dari W3C, pertama kali hadir di Internet Explorer 11 dan sekarang menjadi bagian dari setiap browser utama. API ini menangani mouse, pena, dan sentuhan melalui satu keluarga event — pointerdown, pointermove, pointerup, pointercancel — dan menampilkan properti pointerType pada setiap event yang menyebutkan sumbernya: "mouse", "pen", atau "touch". Dokumentasi MDN Pointer Events menjelaskan model lengkapnya; spesifikasi W3C dipelihara di w3c.github.io/pointerevents.

Apa yang sebenarnya dipicu oleh trackpad desktop

Ini bagian yang mengejutkan banyak pengembang: trackpad laptop di OS desktop tidak memicu TouchEvent, dan tidak menghasilkan PointerEvent dengan pointerType: "touch". Yang dipicu adalah:

PointerEvent dengan pointerType: "mouse" — gerakan kontak tunggal dan klik muncul sebagai event pointer-mouse biasa. Browser tidak bisa membedakan dari event saja apakah perangkat input fisiknya mouse atau trackpad.
WheelEvent — gulir dua jari pada trackpad menghasilkan event wheel, persis seperti roda gulir mouse. Properti deltaX dan deltaY melaporkan jumlah guliran.
WheelEvent dengan ctrlKey: true — OS mengubah gesture cubitan-untuk-zoom trackpad menjadi event wheel dengan flag ctrlKey aktif. Ini adalah sinyal standar lintas browser untuk zoom yang dikendalikan trackpad. Halaman web yang menangkap ctrl+wheel untuk mengimplementasikan perilaku zoom khusus memanfaatkan konvensi ini.

Sementara itu, layar sentuh memicu PointerEvent dengan pointerType: "touch" — dan pada browser yang masih mempertahankan API lama, juga TouchEvent. Dua jari pada layar sentuh menghasilkan dua event pointerdown simultan, masing-masing dengan pointerId berbeda, yang dapat digunakan kode web secara langsung untuk menghitung skala cubitan dengan membandingkan jarak antar pointer.

Mengapa perbedaan ini penting untuk kode gesture

Konsekuensi praktisnya terbagi menjadi tiga pola:

Cubitan dua jari pada layar sentuh — terdeteksi dengan melacak dua event pointerdown bersamaan (atau dua entri dalam TouchEvent.touches) dan menghitung jarak di antara mereka sepanjang event pointermove. Pola ini bekerja di mobile tapi tidak menghasilkan apa-apa di trackpad desktop, karena trackpad tidak pernah mengirim dua kontak pointer simultan ke browser.
Cubitan-untuk-zoom trackpad — hanya terdeteksi melalui event wheel dengan ctrlKey === true. Tidak perlu atau mungkin melakukan perhitungan dua pointer. OS sudah mengubah gesture dua jari menjadi delta zoom skalar sebelum browser menerima apa pun.
Gulir di kedua perangkat — menggunakan event wheel yang sama, menjadikan gulir gesture paling portabel untuk ditangani: addEventListener("wheel", handler) menangkap gulir dua jari trackpad dan delegasi overscroll layar sentuh secara setara.

Pemisahan arsitektural ini memang disengaja. OS memproses kontak multi-jari mentah dari touchpad dan mengirimkan event yang sudah selesai dan diberi label semantik ke browser. Browser kemudian meneruskan event tersebut ke halaman. Sebaliknya, layar sentuh meneruskan data kontak mentah ke browser, itulah sebabnya kode web dapat mengimplementasikan logika cubitan khusus di layar sentuh tapi tidak dapat melakukan hal yang sama di trackpad desktop tanpa keluar dari platform web standar.

Bagaimana penguji mencerminkan desain ini

Modul GestureDetector penguji menggunakan pemisahan ini dengan sengaja. Ketuk, ketuk ganda, tekan lama, dan geser terdeteksi melalui listener PointerEvent — event yang sama yang dipicu trackpad sebagai event pointerType: "mouse". Gulir terdeteksi melalui listener event wheel. Cubitan, bagaimanapun, terdeteksi melalui TouchEvent (touchstart, touchmove) — secara khusus memeriksa dua kontak simultan dan mengukur perubahan jarak di antara mereka. Jika jarak berubah lebih dari 30 piksel, cubitan dipicu. Pada trackpad desktop jalur ini tidak pernah memicu karena tidak ada TouchEvent yang datang; cubitan pada trackpad hanya sampai ke browser sebagai event ctrl+wheel, yang dihitung panel gesture sebagai gulir bukan cubitan. Pada layar sentuh, jalur TouchEvent memicu dengan benar dan penghitung cubitan bertambah.

Satu keterbatasan praktis yang perlu dicatat: kedua API tidak mengungkapkan data kontak jari mentah dari trackpad desktop ke halaman web. Alat penguji dapat mengamati bahwa event ctrl+wheel dipicu, tapi tidak dapat melaporkan berapa jari yang menghasilkannya atau posisi kontak mentahnya — informasi itu dikonsumsi OS sebelum mencapai browser.

Periksa sendiri: gunakan alat di atas pada touchpad laptop dan coba gesture cubitan dua jari. Jika panel Deteksi Gesture tidak menunjukkan peningkatan hitungan cubitan, Anda menggunakan trackpad desktop di mana cubitan datang sebagai ctrl+wheel bukan TouchEvent. Beralih ke perangkat layar sentuh dan ulangi gesture — penghitung cubitan harus bertambah, mengonfirmasi jalur TouchEvent dua jari sekarang aktif.