92

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

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

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

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

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

4

10 に答える 10

75

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

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

これは現在、Android のChrome、AndroidのFirefox 、iOSのSafari でサポートされています。

ただし、iOS Safariでは、ダブルタップはズーム不可のページでのスクロール ジェスチャです。そのため、300 ミリ秒の遅延を取り除くことはできません。ズームできないページの遅延を取り除けない場合、ズーム可能なページでそれを取り除こうとは思わないでしょう。

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 でビューポートを宣言するページで有効になります。作成者は、ここ (「高速タップ動作のスタイリング」の見出しまでスクロールダウン) およびここtouch-action: manipulationに記載されている CSS を使用して、特定の要素に対する高速タップ動作をオプトインすることもできます。

于 2014-01-11T12:21:00.560 に答える
43

このプラグイン - Financial Times が開発した FastClick は 、あなたにぴったりです!

クリック関数の直後にevent.stopPropagation();and/orを追加するようにしてください。そうしないと、私の場合と同じように 2 回実行される可能性があります。event.preventDefault();

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

});
于 2012-11-05T01:08:58.580 に答える
12

Hammer.js (Github page)と呼ばれる非常に人気のある代替手段に出くわしました。これが最良のアプローチだと思います。

Hammer.js は、Fastclick.js (最も支持された回答) よりもフル機能のタッチ ライブラリ (多くのスワイプ コマンドがあります) です。

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

于 2013-05-24T14:19:01.460 に答える
2

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

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

ただし、これがユーザビリティに与える影響に注意してください。アプリとして設計されたWebページには役立つ場合がありますが、より汎用的な「静的」ページIMHOには使用しないでください。低レイテンシーが必要なペットプロジェクトに使用しています。

于 2013-03-02T20:14:28.520 に答える
1

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);          
    }
}
于 2015-08-15T20:11:41.977 に答える
1

残念ながら、これを行う簡単な方法はありません。したがって、touchstartortouchendを使用するだけでは、たとえばボタンをクリックしたときに誰かがスクロールを開始するなど、他の問題が発生します。私たちはしばらく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();
    });
于 2012-09-02T18:56:41.803 に答える