Pertanyaan Memahami acara sentuh


Saya mencoba membuat beberapa pustaka saya berfungsi dengan perangkat sentuh, tetapi saya kesulitan mencoba mencari tahu bagaimana dukungannya dan bagaimana cara kerjanya.

Pada dasarnya, ada 5 acara sentuh, tetapi tampaknya ada konsensus di antara browser seluler hanya di touchstart acara (duh). Saya telah membuat a biola sebagai test case.

Saya telah menguji ini di Galaxy Note saya dengan Android 4 di papan, tetapi Anda dapat memeriksa tautan dengan browser desktop juga.

Tujuannya adalah mencoba mencari tahu cara menangani ketukan, keran ganda, dan ketukan panjang. Tidak ada yang mewah.

Pada dasarnya, inilah yang terjadi:

Itu Browser stok Android tidak mengaktifkan acara sentuhan. Itu hanya mencoba untuk meniru klik mouse dengan ketukan, menembak mousedown, mouseup dan click acara secara berurutan, tetapi ketuk ganda hanya memperbesar dan memperkecil halaman.

Chrome untuk Android mengaktifkan acara touchstart saat jari menyentuh layar. Jika dirilis cukup cepat, maka akan menyala mousedown, mouseup, touchend dan akhirnya click acara.

Dalam kasus ketukan yang panjang, setelah sekitar setengah detik, api itu menyala mousedown dan mouseup, dan touchend ketika jari diangkat, tanpa click acara di akhir.

Jika kamu gerakkan jarimu, ia menembak a touchmove acara beberapa kali, maka itu api a touchcancel acara, dan tidak ada yang terjadi setelah itu, bahkan tidak touchend acara saat mengangkat jari.

SEBUAH ketuk dua kali memicu zoom in / out fitur, tetapi event-wise itu membakar kombo touchstart-touchevent dua kali, tanpa peristiwa tikus dipecat.

Firefox untuk Android memecat touchstart acara, dan dalam kasus kebakaran tap pendek mousedown, mouseup, touchend dan click setelah itu.

Dalam kasus ketukan yang panjang, itu kebakaran mousedown, mouseup dan akhirnya touchend acara. Ini sama dengan Chrome untuk hal-hal ini.

Tetapi jika Anda gerakkan jarimu, jika terjadi kebakaran touchmove terus menerus (seperti yang diharapkan) tetapi tidak tidak api touchleave acara ketika jari meninggalkan elemen dengan pendengar acara, dan tidak memecat touchcancel acara saat jari keluar dari viewport browser.

Untuk tap dua kali, berperilaku seperti Chrome.

Opera Mobile melakukan hal yang sama dari Chrome dan Firefox untuk ketukan singkat, tetapi dalam hal tekan lama mengaktifkan semacam fitur berbagi yang benar-benar ingin saya nonaktifkan. Jika Anda menggerakkan jari Anda, atau mengetuk dua kali, itu berlaku seperti Firefox.

Chrome beta melakukan hal yang biasa untuk keran pendek, tetapi dalam kasus keran panjang itu tidak memecat mouseup acara lagi, hanya touchstart, kemudian mousedown setelah setengah detik, lalu touchend ketika jari diangkat. Saat jari digerakkan, sekarang berperilaku seperti Firefox dan Opera Mobile.

Dalam kasus tap dua kali, itu tidak mengaktifkan peristiwa sentuhan saat memperkecil, tetapi hanya saat memperbesar.

Chrome beta menunjukkan perilaku yang paling aneh, tetapi saya tidak dapat benar-benar mengeluh karena ini adalah beta.

Pertanyaannya adalah: apakah ada cara sederhana dan mencoba mendeteksi keran pendek, ketukan panjang, dan ketukan ganda di peramban paling umum perangkat sentuh?

Sayang sekali saya tidak bisa mengujinya di perangkat iOS dengan Safari, atau IE untuk Windows Phone 7 / Phone 8 / RT, tetapi jika beberapa dari Anda bisa, tanggapan Anda akan sangat dihargai.


76
2018-01-23 18:31


asal


Jawaban:


Jika Anda belum melakukannya, saya sarankan membaca kode sumber untuk Hammer.js

https://github.com/hammerjs/hammer.js/blob/master/hammer.js

Antara komentar dan kode itu sekitar 1400 baris, ada dokumentasi bagus dan kode mudah dimengerti.

Anda dapat melihat bagaimana penulis memilih untuk menyelesaikan banyak acara sentuh yang umum:

tahan, ketuk, doubletap, seret, seret, seret, seret, seret,   dragleft, dragright, swipe, swipeup, swipedown, swipeleft, swiperight,   transform, transformstart, transformend, rotate, pinch, pinchin,   pinchout, sentuh (deteksi gerakan dimulai), lepaskan (deteksi gerakan   berakhir)

Saya pikir setelah membaca kode sumber, Anda akan memiliki pemahaman yang jauh lebih baik tentang cara kerja peristiwa sentuhan dan cara mengidentifikasi acara mana yang mampu ditangani browser.

http://eightmedia.github.io/hammer.js/


24
2017-09-06 18:34



Ada sumber yang sangat bagus https://patrickhlauke.github.io/touch/tests/results/ yang merinci urutan kejadian di sejumlah browser yang mengejutkan. Ini juga tampaknya diperbarui secara berkala (pada bulan September 2016, terakhir diperbarui Agustus 2016).

Intinya adalah, dasarnya semuanya memicu mouseover dan acara terkait; sebagian besar juga memicu peristiwa sentuhan, yang biasanya lengkap (jangkauan touchend) sebelum mouseover dan kemudian berlanjut click (kecuali perubahan ke konten halaman membatalkan ini). Pengecualian canggung itu untungnya relatif jarang (browser android pihak ke-3 dan blackberry playbook).

Sumber daya yang terhubung itu masuk ke tingkat detail yang mengesankan, inilah contoh dari tiga pertama dari banyak, banyak pengujian sistem operasi, perangkat dan browser:

enter image description here

Untuk meringkas beberapa poin kunci:

Browser seluler

  • Semua browser yang dicantumkan memicu mouseover pada ketukan pertama. Hanya beberapa browser Windows Phone yang memicunya pada ketukan kedua.
  • Semua pemicu click. Itu tidak menentukan yang membatalkan click jika mouseover mengubah halaman (saya yakin sebagian besar)
  • Sebagian besar browser memicu mouseover setelah touchstart dan touchend. Ini termasuk iOS7.1 Safari, stok Android, Chrome, Opera dan Firefox untuk Android, dan beberapa (tidak semua browser ponsel Windows)
  • Beberapa peramban Windows Phone (semua Windows 8 / 8.1 dan satu versi untuk 10) dan beberapa pemindai Android pihak ketiga (Dolphin, Maxathon, UC) mouseover  setelah  touchstart dan touchend.
  • Hanya memicu BlackBerry Playbook mouseover antara touchstart dan touchend
  • Hanya Opera Mini dan Puffin (browser pihak ke-3 Android) yang kurang touchstart atau touchend.

Peramban desktop

  • Versi terbaru Chrome desktop dan Opera berperilaku layaknya mitra seluler mereka, touchstart dan touchend diikuti oleh mouseover.
  • Browser Firefox dan Microsoft (IE <= 11 dan banyak versi Edge) tidak memicu apa pun touchstart dan touchend acara.
  • Tidak ada data pada Mac, tetapi mungkin tidak didukung oleh browser Ma touchstart dan touchendmengingat kelangkaan antarmuka layar sentuh Mac.

Ada juga jumlah data yang luar biasa pada browser yang dikombinasikan dengan teknologi bantu.


8
2017-09-13 18:51



Berikut adalah pengamatan terbaru saya tentang acara sentuh dan mouse pada Android 4.3

Opera, Firefox, dan Chrome tampaknya memiliki perilaku standar

  1. Pada Swipe (touchstart-touchmove-touchend):

    1. Tidak ada kejadian mouse (kecuali gerakan mouse).
    2. Gerak mouse hanya aktif jika touchstart dan touchend terjadi pada elemen yang sama. (touchstart-touchmove-touchend-mouseover)
    3. Jika default dicegah pada touchstart: perilaku default swipe tidak berfungsi. tidak ada perubahan yang terjadi terkait pemicu kejadian mouse.
  2. On Tap (touchstart-touchend):

    1. Semua kejadian mouse mouseover-mousemove-mousedown-mouseup-click setelah tertunda
    2. Jika default dicegah pada touchstart: hanya gerakan mouseover.

Browser default Android memiliki beberapa perilaku non-standar:

  1. Arahkan mouse ke api sebelum touchstart yang artinya gerakan mouse selalu menyala.
  2. Semua acara mouse aktif di Tap, meskipun defaultnya dicegah pada layar sentuh.

3
2017-12-18 15:19



Ya, Anda dapat memulai pengatur waktutouchstart dan mengakhirinya touchend dan buat pilihan Anda dari sana.

Juga Anda dapat membuat ... katakanlah swipe, pemicuan saya touchmove Anda bisa mendapatkan coordonates dari "jari" dan melihat seberapa banyak saya melakukan perjalanan sebelumnya touchend dipicu.

Saya tidak tahu apakah ada cara yang lebih sederhana daripada menggunakan perpustakaan acara sentuhan, tetapi saya kira Anda bisa menulis satu untuk 'keran' sederhana, 'ketuk dua kali', 'gesek' acara dengan mudah.


2
2018-01-23 18:34