Komentar: Sebagian besar interaksi di ponsel dicapai melalui sentuhan, jadi untuk situs web layar sentuh, situs web sentuh sangat penting. Di sini kami memperkenalkan beberapa acara sentuh yang lebih populer. Anda dapat menguji acara ini di sebagian besar browser modern. Teman yang tertarik dapat mempelajarinya.
Kata pengantarApa perbedaan antara situs web layar sentuh dan situs web PC tradisional? Perubahan dalam metode interaksi adalah yang pertama terpengaruh. Misalnya, acara klik yang sering kita gunakan sangat tidak berdaya di bawah perangkat layar sentuh.
Sebagian besar interaksi di ponsel dicapai melalui sentuhan, jadi acara sentuh sangat penting untuk situs web interaktif dengan layar sentuh.
Apple memperkenalkan API acara Touch di iOS 2.0, dan Android mengejar standar fakta ini untuk mempersempit kesenjangan. Baru -baru ini, kelompok kerja W3C bekerja bersama untuk merumuskan norma acara sentuh ini.
spesifikasi
Di sini kami memperkenalkan beberapa acara sentuh yang lebih populer. Anda dapat menguji acara ini di sebagian besar browser modern (harus menjadi perangkat layar sentuh):
TouchStart: dipicu saat sentuhan dimulai
TouchMove: dipicu saat jari meluncur di layar
Touchend: dipicu saat sentuhan berakhir
Setiap acara sentuh mencakup tiga daftar sentuh, setiap daftar berisi serangkaian titik sentuh yang sesuai (digunakan untuk mengimplementasikan multi-touch):
Sentuhan: Daftar semua jari yang saat ini terletak di layar.
TargetTouches: Daftar jari yang terletak di elemen DOM saat ini.
ChangedTouches: Daftar jari yang melibatkan peristiwa saat ini.
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.
Dengan informasi ini, kami dapat memberi pengguna umpan balik yang berbeda berdasarkan informasi acara ini.
Di bawah ini, saya akan menunjukkan kepada Anda demo kecil, drag satu jari menggunakan TouchMove:
/*Seret dengan satu jari*/
var obj = document.geteLementById ('id');
obj.addeventListener ('touchmove', function (event) {
// Jika hanya ada satu jari di posisi elemen ini
if (event.targettouches.length == 1) {
event.preventdefault (); // Blokir acara default browser, penting
var touch = event.targettouches [0];
// letakkan elemen di tempat jari Anda berada
obj.style.left = touch.pagex-50 + 'px';
obj.style.top = touch.pagey-50 + 'px';
}
}, PALSU);
Tips pada empat kelas semu dari tag di perangkat layar sentuh:
Kita semua tahu bahwa empat kelas semu dari tag tag, mengunjungi, aktif, dan melayang dirancang untuk acara klik, jadi cobalah untuk tidak menggunakannya di situs web layar sentuh. Sebagian besar tes juga tidak tersedia. Tapi di sini ada sedikit trik tentang melayang. Saat Anda mengklik tombol, tombol akan tetap dalam keadaan hover. Pada saat ini, CSS yang Anda tetapkan berdasarkan kelas semu ini juga berfungsi sampai Anda mengklik tombol lain dengan jari Anda, keadaan hover akan ditransfer ke tombol lain. Menggunakan ini kita bisa membuat beberapa efek kecil. Trik ini masih tersedia di sebagian besar browser.
Cita -cita penuh, kenyataan itu kurus!
Meskipun W3C siap untuk multi-sentuh, sayangnya, beberapa browser mendukung fitur multi-sentuh, terutama browser di platform Android, yang membuat daftar jari diperkenalkan di atas menjadi pembicaraan kosong. Menangkap dua titik sentuh akan secara langsung menyebabkan kegagalan sentuhan! Untungnya, browser Safari yang datang dengan perangkat iOS dapat mendukung fitur ini, yang membuat kami penuh harapan untuk masa depan. Lagi pula, kami telah dipenjara oleh operasi titik tunggal mouse terlalu lama. Betapa menariknya menggunakan situs web lebih banyak!