タップイベントとタップポイントスルー原理の分析

この記事の内容は、タップ事件の分析とタップポイントスルーの原則に関するものであり、参考になるものであり、困っている友人に役立つことを願っています。

最初にタップ イベントを紹介します:

1. タップ イベントの意味: モバイル側では、クリック イベントは 300 ミリ秒の遅延があります。これは、ブラウザーがクリックが継続するかどうかを判断して Web ページをズームするかどうかを決定するためです。 300ミリ秒。 (つまり、Web ページを拡大するダブルクリックの効果は 300ms の判定時間があります。300ms 経過後にクリックイベントがトリガーされます)

2. タップイベントの実装: ブラウザーがサポートするタッチイベントを使用します。デフォルトでは、touchstart、touchmove に従ってシミュレートします。これらの 3 つの touchend イベントは、タップ イベントをシミュレートして、タップ イベントをカプセル化する効果を実現します。以下のコードは、私が作成した単純なカプセル化です。

整理しましょう: タップイベントの順序は touchstart -> touchmove -> touchend -> です

タップタップの原理:

1. この種のアプリケーションシナリオは次のとおりですマスク レイヤーをクリックすると、マスク レイヤーが消え、下部のページが表示されます。下部ページの要素がクリック イベントにバインドされており、その要素の位置でマスクをクリックすると、要素のクリック イベントがトリガーされることがわかります。

2. clickはPC側ではmousedown→move→clickの順で実行され、モバイル側ではtouchstart→touchmove→touchendの順に実行されます。 -> [順次実行] をクリックします。タッチエンドするとマスクが消えるため、下のページの要素をクリックすることと同じになります。したがって、一番下の要素がクリック イベントをトリガーします。

タップクリックの解決策:

1. タップイベントまたはクリックイベントを一律に使用します。

2. マスクレイヤーの消失を300ミリ秒以上遅延させます

3. それをブロックするために透明なマスクを取得します（推奨されません、あまりにも愚かで面倒です）

4. fastclickライブラリを使用してください

関連推奨事項:

HTML5 の新しい属性: 5 つのグローバル属性の紹介

canvas はフロントエンド Web ページのモバイル署名をネイティブに実装します

以上がタップイベントとタップポイントスルー原理の分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。