The touch-actionharta di CSS memberikan anda kawalan ke atas kesan interaksi skrin sentuh dengan unsur, sama dengan lebih meluas digunakan pointer-eventsharta yang digunakan untuk interaksi kawalan tetikus.
#element ( touch-action: pan-right pinch-zoom; )The touch-actionharta adalah berguna terutamanya untuk unsur-unsur UI interaktif yang memerlukan kelakuan yang sedikit berbeza bergantung kepada jenis peranti yang digunakan. Apabila pengguna anda mungkin mengharapkan elemen berperilaku tertentu dengan tetikus, dan tingkah laku yang sedikit berbeza pada skrin sentuh, touch-actionakan sangat berguna.
Contoh yang paling jelas adalah elemen peta interaktif. Sekiranya anda pernah melihat peta yang tidak dirancang untuk berfungsi dengan peranti sentuh, anda mungkin telah mencubit dan mengezum hanya untuk mencari penyemak imbas pembesar elemen, tetapi sebenarnya tidak memperbesar peta sebenarnya.
Secara lalai, penyemak imbas akan menangani interaksi sentuhan secara automatik: Cubit untuk mengezum, geser untuk menatal, dll. Menetapkan touch-actionuntuk nonemelumpuhkan semua pengendalian penyemak imbas peristiwa ini, membiarkannya untuk anda laksanakan (melalui JavaScript). Sekiranya anda hanya mahu mengambil alih satu interaksi, beritahu penyemak imbas untuk menangani yang lain. Sebagai contoh, jika anda menulis beberapa JavaScript yang hanya mengendalikan zoom, anda boleh memberitahu pelayar untuk mengendalikan segala sesuatu yang lain dengan harta ini: touch-action: pan-x pan-y;.
Lihat contoh pen sentuhan aksi oleh CSS-Tricks (@ css-tricks) di CodePen.
Sintaks
touch-action: auto | none | ( ( pan-x | pan-left | pan-right ) || ( pan-y | pan-up | pan-down ) || pinch-zoom ) | manipulationNilai
Tempat touch-actionpenginapan ini menerima nilai berikut:
auto: Membolehkan penyemak imbas menangani semua interaksi pan dan zoom.none: Melumpuhkan penyemak imbas daripada menangani semua interaksi pan dan zoom. Ini membuka kemampuan untuk menentukan interaksi tersebut dalam JavaScript.pan-x: Membolehkan panning mendatar dengan interaksi satu jari. Ia adalah singkatan untukpan-leftdanpan-rightnilai, tetapi boleh digunakan dalam kombinasi denganpan-y,pan-up,pan-downdanpinch-zoom.pan-yMembolehkan panning menegak dengan interaksi satu jari. Ia adalah singkatan untukpan-updanpan-downnilai, tetapi boleh digunakan dalam kombinasi denganpan-x,pan-left,pan-rightdanpinch-zoom.manipulation: Mengaktifkan interaksi cubit dan zum, tetapi melumpuhkan orang lain yang mungkin anda temui di beberapa peranti, seperti ketik dua kali untuk mengezum. Ringkasnya untuk gabunganpan-x pan-y pinch-zoom.pan-left(Eksperimental): Membolehkan interaksi satu jari apabila jari pengguna bergerak ke kanan, yang bergerak ke kiri.pan-right(Eksperimental): Membolehkan interaksi satu jari apabila jari pengguna bergerak ke kiri, yang bergerak ke arah kanan.pan-down(Eksperimental): Membolehkan interaksi satu jari apabila jari pengguna bergerak ke atas, yang bergerak ke bawah.pan-up(Eksperimental): Membolehkan interaksi satu jari apabila jari pengguna bergerak ke bawah, yang bergerak ke atas.pinch-zoom: Membolehkan interaksi berbilang jari dan boleh digabungkan denganpan-nilai lain .
Berkaitan
pointer-events
Sokongan Penyemak Imbas
Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.
Desktop
| Chrome | Firefox | IE | Hujung | Safari |
|---|---|---|---|---|
| 36 | 52 | 10 * | 12 | Tidak |
Mudah Alih / Tablet
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 | 85 | 81 | 13.0-13.1 |
Safari adalah kelalaian sokongan sentuhan tindakan. iOs Safari mempunyai sokongan terhad, hanya untuk nilai autodan manipulationnilai.
Maklumat tambahan
- Spesifikasi Acara Pointer Tahap 2 - Spesifikasi ini sedang dalam Cadangan Calon tetapi bertujuan untuk beralih ke Cadangan Cadangan pada awal tahun 2019, sejak penulisan ini. Tujuannya adalah bahawa dokumen tersebut akan menjadi Syor W3C rasmi.
- Dokumentasi MDN
- Contoh hartanah CSS touch-action pinch-zoom - demo pelaksanaan Google Chrome.
- Tiket WebKit Bugzilla # 133112 - Buka tiket untuk mencadangkan sokongan Safari. Tambahkan undian anda untuk menaikkannya.