Pengenalan kepada acara sentuh dalam membina tapak web skrin sentuh dengan kemahiran tutorial html5_html5

Kata Pengantar
Apakah perbezaan antara tapak web skrin sentuh dan tapak web PC tradisional Perubahan dalam kaedah interaksi menanggung beban? Sebagai contoh, acara klik yang biasa kami gunakan sangat tidak berkuasa pada peranti skrin sentuh.
Kebanyakan interaksi pada telefon mudah alih dicapai melalui sentuhan, jadi untuk tapak web interaktif skrin sentuh, acara sentuh adalah sangat penting.
Apple memperkenalkan API acara sentuh dalam iOS 2.0, dan Android mengejar standard de facto ini dan merapatkan jurang. Baru-baru ini kumpulan kerja W3C bekerjasama untuk membangunkan spesifikasi acara sentuh ini.

Spesifikasi
Di sini kami memperkenalkan beberapa acara sentuhan popular Anda boleh menguji acara ini dalam kebanyakan penyemak imbas moden (mestilah peranti skrin sentuh Oh):
mula sentuh: Dicetuskan apabila. sentuhan bermula
gerak sentuh: Dicetuskan apabila jari meluncur pada skrin
sentuhan: Dicetuskan apabila sentuhan tamat
Dan setiap peristiwa sentuhan termasuk tiga sentuhan Senarai, setiap senarai mengandungi siri titik sentuh yang sepadan (digunakan untuk laksana berbilang sentuhan):
sentuhan: Senarai semua jari pada skrin pada masa ini.
targetTouches: Senarai jari yang terletak pada elemen DOM semasa.
changedTouches: Senarai jari yang terlibat dalam acara semasa.
Setiap titik sentuh mengandungi maklumat sentuhan berikut (biasa digunakan):
pengecam: nilai berangka yang secara unik mengenal pasti jari semasa dalam sesi sentuhan. Biasanya nombor siri bermula dari 0 (android4.1, uc)
sasaran: elemen DOM, yang merupakan sasaran tindakan.
pageX/pageX/clientX/clientY/screenX/screenY: nilai, kedudukan pada skrin tempat tindakan berlaku (halaman termasuk jarak tatal, pelanggan tidak termasuk jarak tatal dan skrin berdasarkan skrin) .
radiusX/radiusY/rotationAngle: Lukiskan elips yang hampir sama dengan bentuk jari, dengan dua sudut jejari dan putaran elips masing-masing. Pelayar ujian awal tidak menyokongnya. Nasib baik, fungsi ini tidak biasa digunakan.
Dengan maklumat ini, kami boleh memberikan maklum balas yang berbeza kepada pengguna berdasarkan maklumat acara ini.

Di bawah, saya akan menunjukkan kepada anda demo kecil, menyeret satu jari menggunakan touchmove :

Salin kod

Kodnya adalah seperti berikut:

/*Seret dengan satu jari*/
var obj = document.getElementById('id'); obj .addEventListener('touchmove', function(event) {
// Jika hanya terdapat satu jari dalam kedudukan elemen ini
if (event.targetTouches.length == 1) {
　 acara. preventDefault() ;// Cegah peristiwa lalai penyemak imbas, penting
var touch = event.targetTouches[0]
// Letakkan elemen di mana jari anda berada
obj.style.left = touch.pageX- 50 'px';
obj.style.top = touch.pageY-50 'px';
}
}, salah); empat Petua untuk kelas pseudo dalam peranti skrin sentuh
:
Kita semua tahu bahawa empat kelas pseudo teg, pautan, dilawati, aktif dan tuding, direka khas untuk acara klik, jadi cuba untuk menggunakannya dalam tapak web skrin sentuh Jangan gunakannya. Selepas ujian, kebanyakannya tidak tersedia. Tetapi di sini ialah sedikit helah tentang hover Selepas anda mengklik butang, butang akan sentiasa berada dalam keadaan hover Pada masa ini, css yang anda tetapkan berdasarkan pseudo-class ini juga akan berfungsi sehingga anda mengklik satu lagi dengan jari anda. . Dengan satu butang, keadaan tuding akan dipindahkan ke butang lain. Menggunakan ini, kita boleh membuat beberapa kesan kecil. Silap mata ini masih berfungsi dalam kebanyakan penyemak imbas.

Cita-cita penuh, realiti kurus!
Walaupun w3c sedia untuk multi-touch, malangnya beberapa pelayar menyokong ciri multi-touch, terutamanya penyemak imbas pada platform android, yang menjadikan senarai jari yang diperkenalkan di atas menjadi Empty talk, menangkap dua titik sentuh secara langsung akan membawa kepada kegagalan sentuhan! Nasib baik, penyemak imbas Safari yang disertakan dengan peranti iOS boleh menyokong ciri ini, yang menjadikan kami penuh harapan untuk masa depan. Lagipun, kami telah dipenjarakan oleh operasi satu klik tetikus terlalu lama Alangkah menggembirakan untuk mengendalikan laman web dengan berbilang jari.