Artikel ini menjelaskan peristiwa JavaScript di layar sentuh. Bagikan untuk referensi Anda. Analisis spesifiknya adalah sebagai berikut:
1. Acara Sentuh
OnTouchStart
Ontouchmove
Ontouchend
OnTouchcancel saat ini mendukung 4 acara sentuh ini, termasuk IE. Karena layar sentuh juga mendukung MouseEvent, pesanan mereka perlu dicatat: TouchStart → Mouseover → Mousemove → Mousedown → MouseUp → Click1
Contohnya adalah sebagai berikut:
/*** OnTouchEvent*/var div = document.getElementById ("div"); // touchstart mirip dengan mousedowndiv.ontouchstart = fungsi (e) {// atribut sentuhan dari acara tersebut adalah titik sentuh, di mana suatu titik sentuh, yang merupakan titik sentuh pada saat yang sama, // oleh karena itu Anda dapat mendapatkan setiap titik sentuh melalui sentuhan Multi-Touch yang ada pada saat yang sama, // Oleh karena itu Anda dapat mendapatkan setiap titik sentuh melalui Touch-Touch melalui Touch, AKTIF SATU, // Oleh karena itu, Anda dapat mendapatkan setiap Touch dari Touch-Touch melalui Touch-Touch. e.touches [0]; // Dapatkan koordinat titik sentuh saat ini, yang setara dengan clientx/clientyvar x = touch.clientx; var y = touch.clienty;}; // sentuh suhu mirip dengan mousemovedv.ontouchmove = function (e) {// Anda dapat menambah pencegahan mousemovedV.ontouchmove = function (e) {// Anda dapat menambah pencegahan default ke mousemovedV.ontouchmove = eventse (e) {// Anda dapat menambah pencegahan default ke mousemovedV.ontouchmove = function (e) {/ menggulir, dll. e.preventDefault ();}; // Touchend mirip dengan mouseUpdiv.ontouchup = function (e) {// tidak ada yang bisa dilakukan};2. Gerakan Peristiwa Gerakan mengacu pada penggunaan multi-sentuh untuk memutar, meregangkan dan operasi lainnya, seperti pembesaran dan rotasi gambar dan halaman web. Peristiwa gerakan dipicu ketika dua atau lebih jari diharuskan untuk menyentuh pada saat yang sama. Satu hal yang perlu kita perhatikan tentang penskalaan adalah koordinat posisi elemen: kita biasanya menggunakan OffsetX, GetboundingClientRect dan metode lain untuk mendapatkan koordinat posisi elemen, tetapi di browser seluler, halaman tersebut sering diskalakan selama penggunaan, jadi akankah koordinat perubahan elemen yang diskalakan? Jawabannya adalah ada perbedaan. Gunakan skenario untuk menggambarkan masalah ini: Setelah halaman A dimuat, JavaScript mendapatkan koordinat elemen dalam dokumen sebagai (100.100), dan kemudian pengguna memperbesar halaman. Pada saat ini, JavaScript mengeluarkan koordinat elemen lagi, dan masih (100.100), tetapi area respons elemen pada layar akan diimbangi sesuai dengan rasio penskalaan. Anda dapat membuka demo game bermain bata, dan kemudian memperbesar setelah halaman sepenuhnya dimuat. Pada saat ini, Anda akan menemukan bahwa bahkan jika jari Anda menyentuh di luar area "sentuh di sini", Anda dapat mengontrol pelat bola karena area tersebut diimbangi. Offset akan selalu ada kecuali halaman disegarkan atau zoom dipulihkan.
/*** OngestureEvent*/var div = document.getElementById ("div"); div.ongestureChange = fungsi (e) {// skala mewakili skala penskalaan yang dihasilkan oleh gerakan. Kurang dari 1 menyusut, dan lebih besar dari 1 adalah pembesaran. Awalnya skala 1var = e.scale; // Rotasi mewakili sudut gerakan rotasi, interval nilai [0,360], nilai positif berputar searah jarum jam, nilai negatif berlawanan arah jarum jam = e.rotasi;};3. Gravity Sensing Gravity Sensing lebih sederhana, Anda hanya perlu menambahkan peristiwa OnorientationChange ke simpul tubuh. Dalam acara ini, nilai yang mewakili arah telepon saat ini diperoleh dari properti Window.orientation. Daftar nilai window.orientation adalah sebagai berikut:
0: Konsisten dengan arah saat halaman pertama kali dimuat
-90: Diputar searah jarum jam sebesar 90 ° relatif terhadap arah asli
180: berusia 180 °
90: Beralih 90 ° berlawanan arah jarum jam. Menurut tes saya, Android 2.1 belum mendukung penginderaan gravitasi. Di atas adalah peristiwa layar sentuh saat ini. Peristiwa ini belum dimasukkan ke dalam standar, tetapi telah banyak digunakan. Saya memiliki Android 2.1, tidak diuji di lingkungan lain.
PS: Di sini kami memberi Anda alat online tentang acara JS, yang merangkum jenis acara yang umum digunakan dan fungsi fungsi JS:
Daftar lengkap acara dan fungsi JavaScript:
http://tools.vevb.com/table/javascript_event
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.