モバイルSafariでクリックイベントの300ミリ秒の遅延を排除

モバイルSafariでは、リンク/ボタンがクリックされてからイベントが発生するまでのクリックイベントで300ミリ秒の遅延があることを読みました。遅延の理由は、ユーザーがダブルクリックするつもりかどうかを確認するために待機することですが、UXの観点からは、300ms待機することは望ましくありません。

この300ミリ秒の遅延を解消する1つの解決策は、jQuery Mobileの「タップ」処理を使用することです。残念ながら、私はこのフレームワークに精通しておらず、必要なものが1行または2行のコードをtouchend適切に適用するだけの場合は、大きなフレームワークをロードしたくありません。

多くのサイトと同様に、私のサイトには次のような多くのクリックイベントがあります。

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

そして、私がしたいのは、次のような単一のコードスニペットを使用して、すべてのクリックイベントの300ミリ秒の遅延を取り除くことです。

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

それは悪い/良い考えですか？

現在、一部のモバイルブラウザでは、ビューポートを設定した場合、300 msのクリック遅延が解消されています。回避策を使用する必要はもうありません。

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

現在、Chrome for Android、Firefox for Android、Safari for iOSがサポートされています

ただし、iOS Safariでは、ダブルタップはズームできないページでのスクロールジェスチャーです。そのため、300msの遅延を取り除くことはできません。ズームできないページの遅延を削除できない場合、ズーム可能なページの遅延を削除することはほとんどありません。

Windows Phoneもズームできないページで300ミリ秒の遅延を保持しますが、iOSのような代替のジェスチャーがないため、Chromeのようにこの遅延を取り除くことができます。以下を使用して、Windows Phoneの遅延を削除できます。

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

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

2015年12月更新

これまで、iOSのWebKitとSafariでは、リンクまたはボタンをシングルタップでアクティブにしてからダブルタップでページを拡大できるようになるまでに350ミリ秒の遅延がありました。Chromeは、数か月前に、よりスマートなアルゴリズムを使用してこれを検出し、これを変更しました。 WebKitが同様のアプローチでこれを変更しました。この記事は、ブラウザーがタッチジェスチャーでどのように機能するか、そしてブラウザーが現在よりもはるかにスマートになる方法について、いくつかの素晴らしい洞察を提供します。

2016年3月更新

iOSのSafariでは、2番目のタップを検出するための350ミリ秒の待機時間が削除され、「高速タップ」応答が作成されます。これは、width = device-widthまたはuser-scalable = noのいずれかでビューポートを宣言するページで有効です。著者らはまた、CSSを使用して、特定の要素の高速タップ動作にして選ぶことができますtouch-action: manipulation文書化されているように、ここで （ 'スタイリング高速タップ動作]という見出しの下にスクロール）と、ここで。

Financial Timesによって開発されたこのプラグイン-FastClick は、あなたにぴったりです。

ただし、クリック関数の直後に直接追加することを確認してください。追加event.stopPropagation();しevent.preventDefault();ない場合、2回実行される可能性があります。つまり、

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

});

私はこれが古いことを知っていますが、ブラウザで「タッチ」がサポートされているかどうかをテストすることはできませんか？次に、「タッチエンド」または「クリック」のいずれかの変数を作成し、その変数を要素にバインドされるイベントとして使用しますか？

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

そのため、このコードサンプルは、「touchend」イベントがブラウザーでサポートされているかどうかを確認し、サポートされていない場合は「click」イベントを使用します。

（編集：「touchend」を「ontouchend」に変更）

私が遭遇してきたHammer.jsと呼ばれる非常に人気の高い代替 （Githubのページ）最善の方法だと思います。

Hammer.jsは、Fastclick.js（最も賛成の回答）よりもフル機能のタッチライブラリ（多くのスワイプコマンドがあります）です。

ただし、モバイルデバイスで高速にスクロールすると、Hammer.jsまたはFastclick.jsのいずれかを使用すると、UIがロックされる傾向があります。これは、サイトにニュースフィードや、ユーザーが頻繁にスクロールするインターフェイス（ほとんどのWebアプリのように見える）がある場合の大きな問題です。このため、現時点ではこれらのプラグインのどちらも使用していません。

どういうわけか、ズームを無効にすると、この小さな遅延が無効になるようです。ダブルタップはもう必要ないので、理にかなっています。

モバイルWebページでズームを「無効」にするにはどうすればよいですか？

ただし、これがユーザビリティに与える影響に注意してください。アプリとしてデザインされたウェブページには役立つかもしれませんが、より一般的な「静的」ページIMHOには使用しないでください。低レイテンシが必要なペットプロジェクトに使用します。

残念ながら、これを行う簡単な方法はありません。したがって、単にを使用するtouchstartかtouchend、ボタンをクリックしたときに誰かがスクロールを開始するなど、他の問題が発生します。私たちはしばらくの間zeptoを使用していますが、この非常に優れたフレームワークを使用しても、時間の経過とともに発生したいくつかの問題があります。それらの多くは閉じられていますが、それは単純な解決策の分野ではないようです。

リンクのクリックをグローバルに処理するこのソリューションがあります。

   $(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とfastclickライブラリなしで簡単な方法を探しました。これは私にとってはうまくいきます：

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

追加情報を提供するだけです。

iOS 10では<button>、ページのsを継続的にトリガーできませんでした。常に遅れがありました。

fastclick / Hammer / tapjs / clickをtouchstartに置き換えてみましたが、すべて失敗しました。

更新：その理由は、ボタンが端に近すぎるためです！中央近くに移動して、ラグが消えます！

あなたは明示的にパッシブモードを宣言することになっています：

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

    alert('fast touch');

}, { passive : true});

jQueryでは、「touchend」イベントをバインドできます。タップ後すぐに魔女トリガーコード（キーボードのキーダウンのようなもの）です。現在のChromeおよびFirefoxタブレットバージョンでテスト済み。タッチスクリーンのラップトップやデスクトップデバイスの場合は、「クリック」も忘れないでください。

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

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

	// everything else
});