Metode implementasi acara sentuh HTML5 untuk mengimplementasikan bilah kemajuan sederhana di terminal seluler

Banyak event baru telah ditambahkan ke HTML, namun karena masalah kompatibilitas, banyak event yang tidak banyak digunakan. Selanjutnya, kami akan memperkenalkan beberapa event sentuh seluler yang berguna: touchstart, touchmove, touchend.

Mari kita perkenalkan secara singkat peristiwa-peristiwa ini:

1. touchstart: Dipicu ketika jari menyentuh layar, meskipun sudah ada jari di layar.
2. touchmove: Dipicu terus menerus saat jari menggeser layar. Selama kejadian ini, memanggil kejadian preventDefault() dapat mencegah pengguliran.
3. touchend: dipicu ketika jari meninggalkan layar.

Peristiwa sentuhan ini memiliki properti dom yang sama. Selain itu, mereka berisi tiga properti untuk melacak sentuhan:

1. sentuhan: Serangkaian objek sentuh yang mewakili operasi sentuh yang sedang dilacak.
2. targetTouches: Array objek Sentuh khusus untuk target acara.
3. changeTouches: Serangkaian objek Sentuh yang mewakili apa yang telah berubah sejak sentuhan terakhir.

Setiap objek sentuh berisi properti berikut:

1. clientX: Koordinat x dari target sentuh di area pandang.
2. clientY: Koordinat y dari target sentuh di area pandang.
3. pageX: Koordinat x dari target sentuh di halaman.
4. pageY: Koordinat y dari target sentuh di halaman.
5. screenX: screenX: Koordinat x dari target sentuh di layar.
6. screenY: screenX: Koordinat x dari target sentuh di layar.
7. pengenal: ID unik yang mengidentifikasi sentuhan.
8. target: screenX: Koordinat x dari target sentuh di layar.

Sekarang setelah Anda memahami karakteristik peristiwa sentuh, mari kita mulai sesi praktik yang menarik.

Mari gunakan acara sentuh untuk mengimplementasikan bilah kemajuan geser di sisi seluler.

Mari kita tata letak HTMLnya terlebih dahulu

 <div class=progress-wrapper> <div class=progress></div> <div class=progress-btn></div></div>

Bagian CSS dihilangkan di sini

Dapatkan elemen dom dan inisialisasi titik awal sentuhan dan jarak antara tombol dan bagian paling kiri wadah

 const progressWrapper = document.querySelector('.progress-wrapper')const progres = document.querySelector('.progress')const progresBtn = document.querySelector('.progress-btn')const progresWrapperWidth = progresWrapper.offsetWidthlet touchPoint = 0biarkan btnLeft = 0

Dengarkan acara touchstart

 progressBtn.addEventListener('touchstart', e => { let touch = e.touches[0] touchPoint = touch.clientX // Dapatkan posisi awal sentuhan btnLeft = parseInt(getComputedStyle(progressBtn, null)['left'] , 10 ) // Abaikan kompatibilitas browser IE di sini})

Dengarkan acara touchmove

 progresBtn.addEventListener('touchmove', e => {e.preventDefault() let touch = e.touches[0] let diffX = touch.clientX - touchPoint // Hitung perubahan jarak dengan selisih antara posisi saat ini dan posisi awal position let btnLeftStyle = btnLeft + diffX // Tentukan nilai kiri baru untuk tombol touch.target.style.left = btnLeftStyle + 'px' progres.gaya.lebar = (btnLeftStyle / progresWrapperWidth) * 100 + '%' // Hitung persentase panjang bilah kemajuan melalui rasio nilai kiri tombol dengan panjang wadah bilah kemajuan})

Melalui serangkaian operasi logis, bilah kemajuan kami pada dasarnya telah diterapkan, tetapi masalah telah ditemukan. Ketika posisi sentuh melebihi wadah bilah kemajuan, bug akan terjadi. Mari kita buat beberapa batasan.

 if (btnLeftStyle > progresWrapperWidth) { btnLeftStyle = progresWrapperWidth } else if (btnLeftStyle < 0) { btnLeftStyle = 0}

Pada titik ini, bilah gulir seluler sederhana telah diterapkan

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