JavaScript - タップで 300 ミリ秒のクリック遅延の問題を解決できるか?

Question

クリック&タップ

モバイル端末で最も推奨される書き込み方法は、クリック イベントの代わりに zepto のタップ イベントを使用することですが、その理由は一般に、クリック イベントには伝説的な 300ms の遅延があるためです。

＃＃＃試験結果＃＃＃

しかし、実際のテストでは、クリック イベントの方がタップ イベントよりも高速であることがわかりました。

クリックとタップのトリガー遅延はわずか約 100ms

＃＃＃デモ＃＃＃ リーリー ＃＃＃出力＃＃＃ リーリー

関連する質問

モバイル端末がzeptoのタップイベントを使用すると、少し透明になります。

理由は一般的に次のとおりです。親の dom (通常はマスク レイヤー) がタップ イベントで閉じられているか非表示になっており、子 dom にはたまたまクリック イベントがあるため、子 dom にもたまたまクリック イベントが発生します。イベント フロー メカニズム (バブリングのキャプチャ) への追加、クリック イベントもレベル DOM によってトリガーされます。

分析: それらがすべてバブリング ステージ (イベント トリガーのデフォルトのバブリング ステージ) にある場合、親はサブセットの後に確実にトリガーされ、ポイントスルー現象は発生しないはずです。

一部のブログ記事では、親がタップを使用し、サブセットがクリックを使用すると述べています。デモのトリガー時間を確認すると、これが起こる可能性は低いです。

その主な理由は、同じビジネス ロジックでクリックとタップを同時に使用する愚か者がいるからでしょうか?

つまり、基本的にキャプチャフェーズは主にイベントを同時にトリガーするために使用されるように感じます。しかし、問題もあります。Zepto のイベント メカニズムはイベント バブリングに基づいており、touch.js のイベントはドキュメントにバインドされています。

Answer 1

タップを使用するか、fastclick.jsを導入してください

Answer 2

引用推奨fastclick.js,可以解决clickイベントには300ミリ秒の遅延が発生します
公式サイト https://github.com/ftlabs/fas...

Answer 3

zepto のタップイベントは単なるシミュレーションであり、その効率は当然ながらネイティブのクリック応答ほど高速ではありません。比較的単純な要件 (たとえば、「クリック」イベントに応答するだけでよい) の場合は、fastclick の使用を検討できます。利点は、元のクリック イベント処理を変更する必要がなく、変更できることです。 PCとモバイル端末の両方に対応しています。ただし、モバイル要件のみの場合は、ネイティブの touchstart イベントを使用してください。

もう 1 つの解決策は、Hammerjs や Tencent の AlloyFinger などのジェスチャ ライブラリを直接使用することです。これは、より複雑なジェスチャ要件があるシナリオに適しています。

Answer 4

タッチスタートを検討してみてはいかがでしょうか

Answer 5

クリック イベントの原因を修正します。バブリング メカニズムが原因ではなく、クリック イベントの遅延が原因です。

• たとえば、閉じるボタンをクリックすると、touchend が最初にタップをトリガーし、ポップアップレイヤーとマスクが非表示になります。タッチエンド後、引き続き 300 ミリ秒待って、他の動作がないことを確認してからクリックをトリガーし続けます。この時点ではポップアップ レイヤーが消えているため、現在のクリック イベントのターゲットは基礎となる要素上にあります。基礎となるイベントコンテンツがトリガーされます。イベントトリガーのプロセス全体は、タッチエンド -> タップ -> クリックです。