web-dev-qa-db-ja.com

300msの遅延除去：fastclick.jsの使用とontouchstartの使用

通常のjQueryを使用していますが、次のようなイベントハンドラがあります。

$('#someID').on({

   click: SomeFunction

}, '.SomeClass');

これにより、クリックイベントで300ミリ秒の遅延が発生します。この遅延を削除したいと考えています。このようなコードを書き直すことの違いは何ですか：

$('#someID').on({

   'touchstart': SomeFunction

}, '.SomeClass');

Fastclick.js ？などの外部ライブラリを使用する

javascriptjquerycordovafastclick
19
frenchie

Financial Timesで働いており、Fastclick.jsを作成したチームを率いています。

原則として、Fastclickは、touchendイベントにバインドして、同じ要素でclickイベントを発生させるだけです。ただし、Edgeのケース、トラップ、落とし穴は数多くあり、それらはすべて発見され、回避され、fastclickに組み込まれています。例えば：

  • タッチ中に指を動かすと、それはスワイプまたは他の種類のジェスチャーなので、反応しないでください
  • 一度に複数の指でタッチした場合、反応しないでください
  • テキストフィールドをタッチすると、コントロールはクリックイベントを受け取るだけでなくフォーカスを取得する必要があります
  • 一部のコントロールは（セキュリティのため）ネイティブのクリックを必要とするため、Fastclickの選択的なオプトアウトを許可する必要があります
  • 一部のブラウザは、ビューポートのサイズ設定がデフォルトのdevice-width。これらのユーザーエージェントでは、Fastclickの動作をまったく有効にしないでください。

Fastclickは1％の基本的な前提条件であり、99％のEdgeケースであるため、おそらく自分で作成できるものを含め、より小さな代替物がたくさんあります。しかし、多くの人々は、十分にテストされたライブラリーを使用することで得られる安心感を好みます。

A）マウスボタンまたはトラックパッドから指を離すまでクリックがトリガーされないため、touchendではなくtouchstartを使用することに注意してください。タッチを終了します。画面に接触しているときに指を動かすかどうかはまだわかりません。これは、クリックではなくジェスチャー、スワイプ、またはスクロールです。

お役に立てば幸いです。

80
Andrew

touchstartは指が要素に触れたときに発生しますが、clickは指を離すまで発生しません（touchend）同じ要素で。タッチした場合、要素から指を離してから離すと、clickイベントは発生しません。ただし、その場合、タッチスタートは発生します。

Cordovaをタグ付けするため、モバイル用のCordovaハイブリッドアプリであると想定します。
1。 On Android 2.3.x以降、ズームを無効にすると300ミリ秒が削除されます。

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

2. Android 4.4.3以降（webviewのChrome 33）以降）、ページがモバイル向けに最適化されていることを指定すると、300ミリ秒が削除されます。

<meta name="viewport" content="width=device-width" />

  1. IE10 +では、CSSを使用してその遅延を削除します。

    -ms-touch-action：操作;/* IE10/
    touch-action：操作; /    IE11 + * /

  2. IOSでは、viewportを使用して300msの遅延を無効にすることはできません

したがって、300msが確実に削除されるように、通常はタップにタップライブラリを使用します。例： tappy （タップのみ）、 zepto touch （タップ、スワイプ-サイトで既にzeptoを使用している場合に有効）、 hammer.js （さまざまなジェスチャー）、ニーズに応じて。これらのタップイベントは300ミリ秒の問題の影響を受けません。

FastClick.jsは問題ないはずですが、まだ試していません。

10
Truong Hong Thi

300ms遅延を取り除くために、2つのオプションがあります：

オプション1：

デフォルトでは、webviewのクリックイベントに約300msの遅延があり、非常に遅い応答/パフォーマンスが得られますボタンをクリックします。 jQuery Mobileの 'tap'イベントでクリックイベントをオーバーライドして、遅延を削除することができます：（Source： [〜 ＃〜] ibm [〜＃〜]）

$('btnId').on('tap', function(e) {
     e.stopImmediatePropagation();
     e.preventDefault();
     ...
});

オプション2：興味深いもの

デフォルトでは、JQuery Mobile CSSitselfは長い遅延を導入しています-300msまたは350msまたは225msの場所を意味します。これらの遅延はoptimizedにできます。私もデフォルトのCSSを変更し、長い遅延を350msから100msに変更しましたページ遷移それは本当に素晴らしかった。

Jquery Mobile CSSで検索：animation-duration

JQuery Mobile 1.2.0

場所によっては、遅延が-webkit-animation-duration:350ms;-moz-animation-duration:350ms他の場所の遅延は：-webkit-animation-duration:225ms;-moz-animation-duration:225ms

githubの最新バージョン：

.in {
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 350ms;
    -moz-animation-timing-function: ease-out;
    -moz-animation-duration: 350ms;
    animation-timing-function: ease-out;
    animation-duration: 350ms;
}
.out {
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 225ms;
    -moz-animation-timing-function: ease-in;
    -moz-animation-duration: 225ms;
    animation-timing-function: ease-in;
    animation-duration: 225ms;
}

チェック このgithubコード ：

クリック、ページ遷移、フリップ、スライドなど、どの遅延を最適化するかはあなた次第です。したがって、デフォルトの遅延時間を希望の遅延時間に変更するだけです。

このように、[〜＃〜] no [〜＃〜]追加のライブラリが必要です

2
AAhad

アンドリューは正しい答えを与えます。

一般に、

"touchstart"は、「クリック」、「スワイプ」、「スクロール」などを実行するとトリガーされます。しかし、ご存知のように、キャプチャしたいのは「クリック」です。

FastClick.jsは「クリック」のルールを定義することです。たとえば、以下の条件を「クリック」として設定できます。

「touchstart」と「touchend」の間の時間は200ミリ秒で、「touchmove」では、移動した距離はありません。

同じように、以下の条件を「スクロール」として設定できます。

「touchstart」および「touchend」の間、「touchmove」では、距離がy軸上で移動されましたが、x軸の移動は発生しません。

2
Jack He

最近ではFastClick.jsを使用できません：

注：2015年後半には、ほとんどのモバイルブラウザー（特にChromeとSafari）で300ミリ秒のタッチ遅延がなくなりました。そのため、fastclickは新しいブラウザーではメリットがなく、アプリケーションにバグが導入されるリスクがあります。本当に使用する必要があるかどうかを慎重に確認してください。

（取得元： https://github.com/ftlabs/fastclick docs）

0
TechWisdom

モバイル向けに最適化されていないサイトにアクセスすると、ズームアウトが開始されるため、ページの幅全体が表示されます。コンテンツを読むには、ズームをピンチするか、一部のコンテンツをダブルタップして全角にズームします。このダブルタップは、パフォーマンスのキラーです。すべてのタップで、ダブルタップになるかどうかを確認するために待機する必要があり、その待機時間は300ミリ秒です。以下にその方法を示します。

  • タッチスタート
  • タッチエンド
  • 別のタップの場合は300ミリ秒待機します
  • クリック

この一時停止は、JavaScriptのクリックイベントに適用されますが、リンクやフォームコントロールなどの他のクリックベースのインタラクションにも適用されます。

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

Fastclick.jsは、ユーザーが要素をクリックすることを望まず、スクロールすることを決定した場合に関連する問題を解決します。

0
user1050438