Artikel ini terutama memperkenalkan kompilasi peristiwa sentuh umum yang dikembangkan oleh terminal seluler HTML5. Objek acara acara sentuh pada dasarnya sesuai dengan atribut operasi mouse. Teman yang membutuhkannya bisa merujuknya.
Banyak acara baru telah ditambahkan ke HTML5, tetapi karena masalah kompatibilitas mereka tidak ideal dan aplikasinya tidak terlalu praktis, mereka pada dasarnya dihilangkan di sini. Kami hanya berbagi acara dengan kompatibilitas yang baik dengan aplikasi yang luas. Kami akan menambahkan dan membagikannya satu demi satu karena situasi kompatibilitas meningkat di masa depan. Peristiwa yang akan saya perkenalkan kepada Anda hari ini adalah acara sentuh: TouchStart, TouchMove dan Touchend.
Pada awalnya, acara sentuh TouchStart, TouchMove dan Touchend adalah acara yang baru ditambahkan untuk browser Safari versi iOS untuk menyampaikan beberapa informasi kepada pengembang. Karena perangkat iOS tidak memiliki mouse atau keyboard, saat mengembangkan halaman web interaktif untuk browser safari seluler, acara mouse dan keyboard di PC tidak cukup.
Ketika iPhone 3GS dirilis, browser safari selulernya sendiri menyediakan beberapa acara baru yang terkait dengan operasi sentuh. Acara yang sama kemudian diimplementasikan oleh browser di Android. Acara sentuh akan dimulai ketika pengguna meletakkan jarinya di layar, saat meluncur di layar, atau saat bergerak menjauh dari layar. Detail berikut dijelaskan:
Acara TouchStart: dipicu ketika jari menyentuh layar, itu akan memicu bahkan jika satu jari sudah ditempatkan di layar.
Acara TouchMove: Pemicu terus menerus saat jari meluncur di layar. Selama acara ini, acara Calling PreventDefault () dapat mencegah pengguliran.
Acara Touchend: dipicu saat jari meninggalkan layar.
Acara TouchCancel: dipicu ketika sistem berhenti melacak sentuhan. Dokumen tidak menentukan waktu keberangkatan yang tepat dari acara ini, jadi kami hanya bisa menebak.
Semua acara di atas akan menggelegak dan dapat dibatalkan. Meskipun peristiwa sentuh ini tidak didefinisikan dalam spesifikasi DOM, mereka diimplementasikan dengan cara yang kompatibel dengan DOM. Therefore, each touch event event object provides common attributes in mouse practice: bubbles (the type of bubble event), cancelable (whether the default action associated with the event can be canceled with the preventDefault() method), clientX (returns the horizontal coordinate of the mouse pointer when the event is triggered), clientY (returns the vertical coordinate of the mouse pointer when the event is triggered), screenX (returns the horizontal Koordinat penunjuk mouse saat acara dipicu), dan bersinar (mengembalikan koordinat vertikal pointer mouse ketika acara dipicu). Selain properti DOM umum, acara sentuh juga berisi tiga atribut berikut untuk pelacakan sentuhan.
Sentuhan: Array objek sentuh yang mewakili operasi sentuh yang saat ini dilacak.
TargetTouches: Array objek sentuh khusus untuk target acara.
ChangeTouches: Array objek sentuh yang mewakili apa yang telah berubah sejak sentuhan terakhir.
Setiap objek sentuh berisi sifat -sifat berikut.
ClientX: Sentuh koordinat X target di viewport.
Clienty: Sentuh koordinat Y target di viewport.
Identifier: ID unik yang mengidentifikasi sentuhan.
Pagex: Sentuh koordinat x target di halaman.
Pagey: Sentuh koordinat Y target di halaman.
ScreenX: Sentuh koordinat X target di layar.
Screeney: Sentuh koordinat-Y target di layar.
Target: Menyentuh target simpul DOM.
Setiap titik sentuh berisi informasi sentuh berikut (biasanya digunakan):
Identifier: Nilai yang secara unik mengidentifikasi jari saat ini di sesi sentuh. Secara umum, nomor aliran mulai dari 0 (Android4.1, UC)
Target: Elemen DOM, adalah target yang ditargetkan oleh tindakan.
Pagex/Pagex/ClientX/Clienty/Screenx/Screeney: Nilai, di mana tindakan terjadi pada layar (halaman berisi jarak gulir, klien tidak berisi jarak gulir, layar didasarkan pada layar).
Radiusx/radiusy/rotationangle: Gambar elips kira -kira setara dengan bentuk jari, dua jari -jari dan sudut rotasi masing -masing elips. Browser tes pendahuluan tidak mendukungnya, tetapi untungnya fungsinya tidak umum digunakan, sehingga semua orang dipersilakan untuk umpan balik.
Contoh kecil operasi JavaScript:
Kode javascript menyalin konten ke clipboard