Beranda>Tutorial Desain Web>tutorial HTML

Implementasi acara sentuh HTML5 untuk menentukan arah geser

Penulis：Eve Cole Waktu Pembaruan：2025-03-23 02:00:02

Untuk memberikan dukungan yang kuat untuk antarmuka sentuh, peristiwa sentuh memberikan kemampuan untuk merespons operasi pengguna pada layar sentuh atau bantalan sentuh.

antarmuka

Acara Sentuh

TouchEvent adalah jenis peristiwa yang menggambarkan perubahan keadaan jari pada permukaan sentuh (layar sentuh, touch pad, dll). Jenis peristiwa ini digunakan untuk mendeskripsikan satu atau lebih titik sentuh, sehingga pengembang dapat mendeteksi pergerakan titik sentuh, kenaikan dan penurunan titik sentuh, dll. Setiap objek Sentuh mewakili titik sentuh; setiap titik sentuh dijelaskan berdasarkan posisi, ukuran, bentuk, tingkat tekanan, dan elemen targetnya. Objek TouchList mewakili daftar beberapa titik sentuh.

Jenis acara sentuh

Untuk membedakan perubahan status terkait sentuhan, ada beberapa jenis peristiwa sentuhan. Anda dapat menentukan jenis peristiwa saat ini dengan memeriksa properti TouchEvent.type dari peristiwa sentuh.

  1. touchstart: dipicu ketika pengguna menempatkan titik sentuh pada permukaan sentuh.
  2. ujung sentuh: Dipicu ketika titik sentuh dihilangkan dari permukaan sentuh oleh pengguna (saat pengguna mengangkat jari dari permukaan sentuh).
  3. touchmove: Dipicu ketika pengguna memindahkan titik kontak pada permukaan sentuh.
  4. touchcancel: Dipicu ketika kontak terputus karena alasan tertentu.
Tentukan arah geser

Prinsip dasarnya adalah mencatat posisi koordinat awal geser (touchStart) dan akhir geser (touchEnd), kemudian menghitung posisi relatifnya. 

 touchStart:function(e){ startX = e.touches[0].pageX; startY = e.touches[0].pageY; e = e || ini; endX = e.changedTouches[0].pageX; endY = e.changedTouches[0].pageY; that.upOrDown(startX,startY,endX,endY);},upOrDown:function (startX, startY, endX, endY) { const that = ini; biarkan arah = that.GetSlideDirection(startX, startY, endX, endY); (arah) { case 0: console.log (tidak ada geser); case 1: console.log (atas); case 2: console.log (down); 3: console.log(kiri); break; case 4: console.log(right); default: break; } },//Arah kembali 1: atas, 2: bawah, 3 sesuai dengan titik awal dan akhir titik : Kiri, 4: Kanan, 0: Tidak menggeser GetSlideDirection:function (startX, startY, endX, endY) { const that = this; let dy = startY - endY; 0; //Jika jarak geser terlalu pendek if(Math.abs(dx) < 2 && Math.abs(dy) < 2) { return result; } let angle = that.GetSlideAngle(dx, dy); sudut > = -45 && sudut < 45) { hasil = }else if (sudut >= 45 && sudut < 135) { hasil = }else if (sudut >= -135 && sudut < -45) { hasil = 2 } else if ((sudut >= 135 && sudut <= 180) || (sudut >= -180 && sudut < -135)) { hasil = 3; hasil; }, //Kembalikan sudut GetSlideAngle:function (dx, dy) { return Math.atan2(dy, dx) * 180 / Math.PI }
Metode JS asli

Selain metode baru di H5, Anda juga dapat menggunakan JS asli untuk menentukan arah geser tampilan. Kodenya adalah sebagai berikut (dapat dijalankan langsung):

Perlu dicatat bahwa chrome selalu menyetel document.body.scrollTop ke 0 dan perlu diubah menjadi document.documentElement.scrollTop. 

 <!DOCTYPE html><html><head> <meta charset=utf-8> <title> VeVb武林网(vevb.com)</title> <style> div { batas: 1 piksel hitam pekat; tinggi 200 piksel; : 100px; luapan: gulir } </style></head><body style=overflow: gulir><h1>Halo kata</h1><h1>Halo kata</h1><h1>Halo kata</h1><h1>Halo kata</h1><h1>Halo kata</h1><h1>Halo kata</h1> <h1>Halo kata</h1><h1>Halo kata</h1><h1>Halo kata</h1><h1>Halo kata kata</h1><h1>Halo kata</h1><h1>Halo kata</h1><h1>Halo kata</h1><h1>Halo kata</h1><h1>Halo kata</h1> <h1>Halo kata</h1><h1>Halo kata</h1><h1>Halo kata</h1><h1>Halo kata kata</h1><h1>Halo kata</h1><h1>Halo kata</h1><h1>Halo kata</h1><h1>Halo kata</h1><h1>Halo kata</h1> <h1>Halo kata</h1><h1>Halo kata</h1><h1>Halo kata</h1><h1>Halo kata kata</h1><h1>Halo kata</h1><h1>Halo kata</h1><h1>Halo kata</h1><h1>Halo kata</h1><h1>Halo kata</h1> <h1>Halo kata</h1><h1>Halo kata</h1><h1>Halo kata</h1><h1>Halo kata kata</h1><h1>Halo kata</h1><h1>Halo kata</h1><h1>Halo kata</h1><h1>Halo kata</h1><h1>Halo kata</h1> <h1>Halo kata</h1><h1>Halo kata</h1><h1>Halo kata</h1><h1>Halo kata</h1><script> fungsi gulir( fn ) { var beforeScrollTop = document.documentElement.scrollTop, fn = fn || function() {}; console.log('beforeScrollTop',beforeScrollTop); .documentElement.scrollTop, delta = setelahScrollTop - sebelumScrollTop; console.log('beforeScrollTop',beforeScrollTop); console.log('afterScrollTop',afterScrollTop); jika( delta === 0 ) kembali salah; false); } gulir(fungsi(arah) { console.log(arah) });</script></body></html>

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.

Artikel Terkait