Opsi tindakan sentuh

Properti CSS touch-action memungkinkan developer membatasi cara pengguna berinteraksi dengan suatu elemen, yang sangat berguna untuk mencegah peristiwa dikirim saat tidak diperlukan.

Sebelum versi 55, Chrome mendukung pan-x dan pan-y yang membatasi elemen untuk men-scroll ke satu arah.

Video di bawah ini menunjukkan contoh elemen tanpa tindakan sentuh yang ditentukan (kiri), serta geser-x dan geser-y (tengah dan kanan).

CSS untuk transmisi layar sebelah kanan dan tengah adalah:

.pan-x {
    touch-action: pan-x;
}

.pan-y {
    touch-action: pan-y;
}

Pada Chrome 55, pan-left, pan-right, pan-up, dan pan-down ditambahkan. Properti ini memiliki perbedaan perilaku yang kecil tetapi penting.

Properti ini memaksa pengguna untuk memulai gestur dalam satu arah sebelum elemen merespons. Hal ini mirip dengan gestur "tarik untuk refresh" yang hanya merespons saat pengguna memberi gestur ke bawah pada layar.

Video berikut menunjukkan pan-right dan pan-down yang memerlukan gestur untuk dimulai dari kanan ke kiri dan dari bawah ke atas. Setelah gestur dimulai, Anda sebenarnya dapat menggesernya bolak-balik. Hanya arah awal yang terpengaruh.

Meskipun video menunjukkan perilaku ini, Anda dapat lebih mudah mencoba sendiri dengan melihat contohnya.

CSS untuk demo ini adalah:

.pan-right {
    touch-action: pan-right;
}

.pan-down {
    touch-action: pan-down;
}

Hal terakhir yang terjadi di dunia tindakan sentuh adalah properti pinch-zoom. Ini adalah properti baru di Chrome 55, di belakang tanda, yang dapat digunakan dengan salah satu opsi geser (yaitu pan-x, pan-y, pan-left, pan-right, pan-down, pan-up).

Jika Anda mencubit situs, biasanya konten halaman akan diperbesar. Menentukan touch-action akan mencegah perilaku ini, tetapi menambahkan cubit dan zoom akan mengaktifkan kembali perilaku ini.

Video ini menunjukkan perbedaan antara touch-action: pan-x dan touch-action: pan-x pinch-zoom;

Semua properti ini harus menyederhanakan beberapa logika yang harus diimplementasikan oleh developer menggunakan pointer-events.