Hilangkan penundaan 300ms pada peristiwa klik di Safari seluler

Saya telah membaca bahwa Safari seluler memiliki penundaan 300ms pada peristiwa klik sejak tautan / tombol diklik hingga saat peristiwa tersebut diaktifkan. Alasan penundaan adalah menunggu untuk melihat apakah pengguna bermaksud untuk melakukan klik dua kali, tetapi dari perspektif UX menunggu 300ms seringkali tidak diinginkan.

Salah satu solusi untuk menghilangkan penundaan 300ms ini adalah dengan menggunakan penanganan "tap" jQuery Mobile. Sayangnya saya tidak terbiasa dengan kerangka kerja ini dan tidak ingin memuat kerangka kerja besar jika yang saya butuhkan hanyalah satu atau dua baris kode yang diterapkan touchenddengan cara yang benar.

Seperti banyak situs, situs saya memiliki banyak peristiwa klik seperti ini:

$("button.submitBtn").on('click', function (e) {   
  $.ajaxSubmit({... //ajax form submisssion
});

$("a.ajax").on('click', function (e) {   
  $.ajax({... //ajax page loading
});

$("button.modal").on('click', function (e) {   
      //show/hide modal dialog
});

dan yang ingin saya lakukan adalah menghilangkan penundaan 300 md pada SEMUA peristiwa klik tersebut menggunakan satu cuplikan kode seperti ini:

$("a, button").on('tap', function (e) {
 $(this).trigger('click');
 e.preventDefault();
});

Apakah itu ide yang buruk / bagus?

Sekarang beberapa browser seluler menghilangkan penundaan klik 300 ms jika Anda menyetel area pandang. Anda tidak perlu menggunakan solusi lagi.

<meta name="viewport" content="width=device-width, user-scalable=no">

Ini saat ini didukung Chrome untuk Android , Firefox untuk Android dan Safari untuk iOS

Namun di Safari iOS , ketuk dua kali adalah gerakan gulir pada halaman yang tidak dapat diperbesar. Untuk alasan itu mereka tidak dapat menghapus penundaan 300 milidetik . Jika mereka tidak dapat menghapus penundaan pada halaman yang tidak dapat diperbesar, kemungkinan besar mereka tidak akan menghapusnya pada halaman yang dapat diperbesar.

Ponsel Windows juga mempertahankan penundaan 300 md pada halaman yang tidak dapat diperbesar, tetapi mereka tidak memiliki gerakan alternatif seperti iOS sehingga mungkin bagi mereka untuk menghapus penundaan ini seperti yang dimiliki Chrome.Anda dapat menghapus penundaan di Windows Phone menggunakan:

html {
-ms-touch-action: manipulation;
touch-action: manipulation;
}

Sumber: http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away

UPDATE 2015 Desember

Hingga saat ini, WebKit dan Safari di iOS mengalami penundaan 350 ms sebelum satu ketukan mengaktifkan tautan atau tombol untuk memungkinkan orang memperbesar halaman dengan dua ketukan. Chrome mengubah ini beberapa bulan yang lalu dengan menggunakan algoritma yang lebih cerdas untuk mendeteksinya dan WebKit akan mengikuti dengan pendekatan serupa . Artikel ini memberikan beberapa wawasan bagus tentang cara kerja browser dengan gerakan sentuh dan bagaimana browser masih bisa menjadi jauh lebih pintar daripada yang ada saat ini.

UPDATE 2016 Maret

Di Safari untuk iOS, waktu tunggu 350 md untuk mendeteksi ketukan kedua telah dihapus untuk membuat respons "ketukan cepat". Ini diaktifkan untuk halaman yang mendeklarasikan viewport dengan width = device-width atau user-scalable = no. Penulis juga dapat memilih perilaku tap cepat pada elemen tertentu dengan menggunakan CSS touch-action: manipulationseperti yang didokumentasikan di sini (gulir ke bawah ke judul 'Styling Fast-Tap Behavior') dan di sini .

Plugin -FastClick yang dikembangkan oleh Financial Times ini melakukannya dengan sempurna untuk Anda!

Pastikan untuk menambahkan event.stopPropagation();dan / atau event.preventDefault();langsung setelah fungsi klik, jika tidak maka akan berjalan dua kali seperti yang saya lakukan, yaitu:

$("#buttonId").on('click',function(event){
    event.stopPropagation(); event.preventDefault();
   //do your magic

});

saya tahu ini sudah tua tetapi tidak bisakah Anda hanya menguji untuk melihat apakah "sentuhan" didukung di browser? Lalu buat variabel baik itu "touchend" atau "klik" dan gunakan variabel itu sebagai peristiwa yang terikat ke elemen Anda?

var clickOrTouch = (('ontouchend' in window)) ? 'touchend' : 'click';
$('#element').on(clickOrTouch, function() {
    // do something
});

Jadi contoh kode tersebut memeriksa untuk melihat apakah acara "touchend" didukung di browser dan jika tidak, maka kami menggunakan acara "klik".

(Edit: mengubah "touchend" menjadi "ontouchend")

Saya telah menemukan alternatif yang sangat populer yang disebut Hammer.js (halaman Github) yang menurut saya merupakan pendekatan terbaik.

Hammer.js adalah pustaka sentuh berfitur lengkap (memiliki banyak perintah gesek) daripada Fastclick.js (jawaban dengan suara terbanyak).

Berhati-hatilah: menggulir cepat di perangkat seluler cenderung benar-benar mengunci UI saat Anda menggunakan Hammer.js atau Fastclick.js. Ini adalah masalah besar jika situs Anda memiliki umpan berita atau antarmuka tempat pengguna akan sering menggulir (akan terlihat seperti kebanyakan aplikasi web). Untuk alasan ini, saya tidak menggunakan plugin ini saat ini.

Entah bagaimana, menonaktifkan zoom tampaknya menonaktifkan penundaan kecil ini. Masuk akal, karena ketuk dua kali tidak diperlukan lagi.

Bagaimana cara "menonaktifkan" zoom pada halaman web seluler?

Namun harap perhatikan dampak kegunaan yang akan ditimbulkan. Ini mungkin berguna untuk halaman web yang dirancang sebagai aplikasi, tetapi tidak boleh digunakan untuk halaman 'statis' tujuan yang lebih umum IMHO. Saya menggunakannya untuk proyek hewan peliharaan yang membutuhkan latensi rendah.

Sayangnya tidak ada cara mudah untuk melakukan ini. Jadi hanya menggunakan touchstartatau touchendakan meninggalkan Anda dengan masalah lain seperti seseorang mulai menggulir ketika mengklik tombol misalnya. Kami menggunakan zepto untuk sementara waktu, dan bahkan dengan kerangka kerja yang sangat bagus ini ada beberapa masalah yang muncul seiring waktu. Banyak dari mereka tertutup , tetapi tampaknya bukan bidang solusi sederhana.

Kami memiliki solusi ini untuk menangani klik pada tautan secara global:

   $(document.body).
    on('tap', 'a',function (e) {
      var href = this.getAttribute('href');
      if (e.defaultPrevented || !href) { return; }
      e.preventDefault();
      location.href= href;
    }).
    on('click', 'a', function (e) {
      e.preventDefault();
    });

Saya mencari cara mudah tanpa jquery dan tanpa fastclick library. Ini bekerja untuk saya:

var keyboard = document.getElementById("keyboard");
var buttons = keyboard.children;
var isTouch = ("ontouchstart" in window);
for (var i=0;i<buttons.length;i++) {
    if ( isTouch ) {
        buttons[i].addEventListener('touchstart', clickHandler, false);         
    } else {
        buttons[i].addEventListener('click', clickHandler, false);          
    }
}

Hanya untuk memberikan beberapa informasi tambahan.

Di iOS 10, <button> s di halaman saya tidak dapat dipicu terus menerus. Selalu ada jeda.

Saya mencoba fastclick / Hammer / tapjs / replacing click dengan touchstart, semuanya gagal.

UPDATE: alasannya sepertinya tombol tersebut terlalu dekat dengan tepi! pindahkan ke dekat pusat dan lag hilang!

Anda seharusnya secara eksplisit menyatakan mode pasif :

window.addEventListener('touchstart', (e) => {

    alert('fast touch');

}, { passive : true});

Di jQuery Anda dapat mengikat acara "touchend", kode pemicu penyihir segera setelah ketuk (seperti keydown di keyboard). Diuji pada versi tablet Chrome dan Firefox saat ini. Jangan lupa juga "klik", untuk laptop layar sentuh dan perangkat desktop Anda.

jQuery('.yourElements').bind('click touchend',function(event){

    event.stopPropagation();
    event.preventDefault();

	// everything else
});