Mobil Safari'de tıklama olaylarında 300 ms gecikmeyi ortadan kaldırın

Mobil Safari'nin, bağlantının / düğmenin tıklandığı andan olayın tetiklendiği ana kadar tıklama olaylarında 300 ms'lik bir gecikme olduğunu okudum . Gecikmenin nedeni, kullanıcının çift tıklamak isteyip istemediğini görmek için beklemektir, ancak UX açısından 300 ms beklemek genellikle istenmeyen bir durumdur.

Bu 300 ms'lik gecikmeyi ortadan kaldırmanın bir çözümü , jQuery Mobile "dokunma" işlemini kullanmaktır. Maalesef bu çerçeveye aşina değilim ve tek ihtiyacım olan bir veya iki satır kodun touchenddoğru şekilde uygulanmasıysa büyük bir çerçeve yüklemek istemiyorum .

Birçok site gibi, sitemde de buna benzer birçok tıklama etkinliği var:

$("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
});

ve yapmak istediğim şey, aşağıdaki gibi tek bir kod parçacığı kullanarak TÜM bu tıklama olaylarındaki 300 ms gecikmeden kurtulmaktır :

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

Bu kötü / iyi bir fikir mi?

Şimdi bazı mobil tarayıcılar, görüntü alanını ayarlarsanız 300 ms'lik tıklama gecikmesini ortadan kaldırır. Artık geçici çözümler kullanmanıza gerek yok.

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

Bu, şu anda olduğu Android için Chrome desteklenen , Android için Firefox ve iOS için Safari'de

Ancak iOS Safari'de , çift dokunma, yakınlaştırılamayan sayfalarda bir kaydırma hareketidir. Bu nedenle 300ms gecikmeyi kaldıramazlar . Yakınlaştırılamayan sayfalardaki gecikmeyi kaldıramazlarsa, yakınlaştırılabilir sayfalarda kaldıramazlar.

Windows Phone'lar, yakınlaştırılamayan sayfalardaki 300 ms'lik gecikmeyi de korur, ancak iOS gibi alternatif bir hareketi yoktur, bu nedenle Chrome'un sahip olduğu bu gecikmeyi kaldırmaları mümkündür.Windows Phone'daki gecikmeyi aşağıdakileri kullanarak kaldırabilirsiniz:

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

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

GÜNCELLEME 2015 Aralık

Şimdiye kadar, iOS'taki WebKit ve Safari, tek dokunuşların bağlantıları veya düğmeleri etkinleştirerek kişilerin çift dokunuşla sayfaları yakınlaştırmasına izin vermeden önce 350 ms'lik bir gecikme yaşadı. Chrome bunu birkaç ay önce, bunu tespit etmek için daha akıllı bir algoritma kullanarak değiştirdi ve WebKit benzer bir yaklaşımla izleyecek . Makale, tarayıcıların dokunma hareketleriyle nasıl çalıştığı ve tarayıcıların nasıl bugün olduğundan çok daha akıllı hale gelebileceği konusunda bazı harika bilgiler veriyor.

GÜNCELLEME 2016 Mart

İOS için Safari'de, "hızlı dokunma" yanıtı oluşturmak için ikinci bir dokunuşu algılamak için gereken 350 ms bekleme süresi kaldırılmıştır. Bu, genişlik = cihaz genişliği veya kullanıcı tarafından ölçeklenebilir = hayır ile bir görüntü alanı bildiren sayfalar için etkinleştirilir. Yazarlar ayrıca CSS'yi buradatouch-action: manipulation belgelendiği gibi kullanarak ('Hızlı Dokunma Davranışı Şekillendirme' başlığına gidin) ve burada belirli öğelerde hızlı dokunma davranışını seçebilirler .

Financial Times tarafından geliştirilen bu eklenti -FastClick bunu sizin için mükemmel bir şekilde yapıyor!

Tıklama işlevinden hemen sonra event.stopPropagation();ve / veya eklediğinizden emin olun event.preventDefault();, aksi takdirde benim için yaptığı gibi iki kez çalışabilir, yani:

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

});

bunun eski olduğunu biliyorum, ancak tarayıcıda "dokunmanın" desteklenip desteklenmediğini test edemez misiniz? Daha sonra "dokunma" veya "tıklama" olan bir değişken oluşturun ve bu değişkeni öğenize bağlanan olay olarak kullanın.

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

Böylece, kod örneği tarayıcıda "touchend" olayının desteklenip desteklenmediğini kontrol eder ve eğer desteklemiyorsa "click" olayını kullanırız.

(Düzenleme: "touchend", "ontouchend" olarak değiştirildi)

Bir rastlamak ettik Hammer.js denilen derece popüler bir alternatif (Github sayfa) Ben iyi yaklaşım olduğunu düşünüyorum.

Hammer.js, Fastclick.js'den (en çok oy alan yanıt) daha tam özellikli bir dokunmatik kitaplıktır (birçok kaydırma komutuna sahiptir).

Yine de dikkatli olun: Mobil cihazlarda hızlı kaydırma, Hammer.js veya Fastclick.js kullandığınızda kullanıcı arayüzünü gerçekten kilitleme eğilimindedir. Sitenizde bir haber kaynağı veya kullanıcıların çok fazla kaydırma yapacağı bir arayüz varsa (çoğu web uygulaması gibi görünür) bu büyük bir sorundur. Bu nedenle, şu anda bu eklentilerin hiçbirini kullanmıyorum.

Her nasılsa, yakınlaştırmayı devre dışı bırakmak bu küçük gecikmeyi devre dışı bırakıyor gibi görünüyor. Artık çift dokunmaya gerek olmadığı için mantıklı.

Bir mobil web sayfasında yakınlaştırmayı nasıl "devre dışı bırakabilirim"?

Ancak lütfen bunun kullanılabilirlik etkisinin farkında olun. Uygulama olarak tasarlanmış web sayfaları için yararlı olabilir, ancak daha genel amaçlı 'statik' sayfalar IMHO için kullanılmamalıdır. Düşük gecikme gerektiren bir evcil hayvan projesi için kullanıyorum.

Ne yazık ki bunu yapmanın kolay bir yolu yok. Yani sadece kullanmak touchstartveya touchendsizi başka sorunlara bırakacaktır, örneğin birisi bir düğmeye tıkladığında kaydırmaya başlar. Bir süre zepto kullanıyoruz ve bu gerçekten iyi çerçevede bile zamanla ortaya çıkan bazı sorunlar var. Birçoğu kapalı , ancak görünüşe göre basit bir çözüm alanı değil.

Bağlantılara yapılan tıklamaları küresel olarak ele almak için bu çözüme sahibiz:

   $(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();
    });

Jquery ve fastclick kitaplığı olmadan kolay bir yol aradım. Bu benim için çalışıyor:

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);          
    }
}

Sadece biraz ekstra bilgi sağlamak için.

İOS 10'da, <button>sayfamdaki sayfalar sürekli tetiklenemiyordu. Her zaman bir gecikme oldu.

Fastclick / Hammer / tapjs / tıklamayı touchstart ile değiştirmeyi denedim, hepsi başarısız oldu.

GÜNCELLEME: Bunun nedeni, düğmenin kenara çok yakın olması! merkeze yakın hareket ettirin ve gecikme gitti!

Açıkça pasif modu beyan etmeniz gerekiyor :

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

    alert('fast touch');

}, { passive : true});

JQuery'de "touchend" olayını, cadı tetikleme kodunu dokunduktan hemen sonra bağlayabilirsiniz (klavyede bir tuşa basma gibidir). Güncel Chrome ve Firefox tablet sürümlerinde test edilmiştir. Dokunmatik ekranlı dizüstü ve masaüstü cihazlarınız için de "tıklamayı" unutmayın.

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

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

	// everything else
});