JS のタッチスタート イベントとクリック イベント間の競合の解決策

この記事では、JS におけるタッチスタート イベントとクリック イベントの間の競合の解決方法をサンプル コードを通じて詳しく紹介します。これは、すべての人の学習や仕事に必要な学習価値があります。ぜひ編集者をフォローして一緒に学んでください。

前書き

モバイルインターネットは現在、多くの国内インターネット大手がモバイルパイを争っています。もちろん、さまざまなアプリやウェブアプリケーションもあります。

以下の記事では、JS における touchstart イベントと click イベント間の競合解決に関する関連内容を主に紹介します。以下では多くを説明しません。詳細な紹介を見てみましょう。

一・ビジネスシナリオの説明

完成したPCサイトをモバイル端末に対応させる際、ユーザーにより良い体験を提供するために、モバイル端末でのサイトの応答速度を高速化したいと考えています。モバイル デバイス固有のイベント システムを使用する必要があります。たとえば、クリック イベントの代わりにタッチスタート イベントを使用します。

なぜこの効果が優れているのですか? Google 開発者ドキュメントの説明によると:

モバイル デバイス上のブラウザは、クリック イベントがトリガーされると、これが「ダブルクリック」イベントではなく「クリック」イベントであることを確認するために 300 ミリ秒遅延します。

タッチスタート イベントの場合、ユーザーの指が画面に触れた瞬間にバインドされたイベントがトリガーされます。したがって、タッチスタートを使用してクリック イベントを置き換えることの重要性は、ユーザーがクリックごとに 300 ミリ秒を節約できるようにすることです。ページで頻繁にクリックが必要な場合、またはアニメーション中にクリックが発生し、アニメーションの流暢性に対する高い要件が要求される状況では、このテクノロジを使用することが非常に必要です。

しかし、最初のシナリオに戻りましょう。PC サイトをモバイル端末に適応させる場合、PC はタッチスタート イベントを認識しないため、単純にタッチスタート イベントとクリック イベントを置き換えることはできません。

II · 競合の理由

もちろん、タッチスタートイベントとクリックイベントを同時に要素にバインドすることもできますが、これはこの記事で解決される問題につながります - これら 2 つのイベントは競合はモバイルデバイスで発生します。

モバイルデバイスはタッチスタートイベントとクリックイベントを同時に認識できるため、ユーザーがターゲット要素をクリックすると、ターゲット要素にバインドされたタッチスタートイベントとクリックイベント（約300ms後）が順番にトリガーされます。 、バインドしたイベント 指定されたコールバック関数は 2 回実行されます。 。これは明らかに私たちが望んでいる結果ではありません。

3つの解決策

この状況に対して、次の2つの解決策があります:

(1)PreventDefaultを使用する

1つ目の解決策は、イベントオブジェクトのpreventDefaultメソッドを使用することです。 PreventDefault メソッドのは、要素のデフォルトのイベント動作の発生を防ぐことですが、興味深いのは、タッチスタート イベントとクリック イベントを同時にターゲット要素にバインドする場合、タッチスタート イベント コールバック関数でこのメソッドを使用すると、その後のイベント動作を防ぐことができることです。クリックイベントが発生します。

結局のところ、追加したクリック イベントは要素の「デフォルト イベント」ではありませんが、機能します。つまり、ブラウザによって実装されているので、これを使用できます。モバイルの問題を解決するためのメソッド。デバイス上の touchstart イベントと click イベントの間の競合は次のとおりです。

const Button = document.getElementById("targetButton")
Button.addEventListener("touchstart", e => {
 e.preventDefault()
 console.log("touchstart event!")
})
 
Button.addEventListener("click", e => {
 e.preventDefault()
 console.log("click event!")
})

ブラウザ上でモバイル デバイスをシミュレートした後、ターゲット要素をクリックすると、コンソールには touchstart イベント フィールドのみが表示されます。明らかに、クリック イベントは正常にブロックされました。

概要

このメソッドを使用する利点は、シンプルかつ粗雑で直接的かつ効果的であり、目的を非常にうまく達成できることですが、欠点は、preventDefault メソッドがブラウザ実装でのクリック イベントを阻止するのではなく、ブラウザ実装でクリック イベントを阻止することです。 PreventDefault 原則として、これはある程度の不確実性をもたらしますが、この方法が失敗する特定のシナリオは見つかりませんでした。

(2) 関数ベースのバインディングイベントの検出

ブラウザが touchstart イベントをサポートしているかどうかを判断することで要素のクリック イベントをカプセル化し、要素がバインドされるべきイベント タイプをクライアントが決定できるようにします。現在の環境に基づいてコードは次のとおりです:

const Button = document.getElementById("targetButton")
const clickEvent = (function() {
 if ('ontouchstart' in document.documentElement === true)
 return 'touchstart';
 else
 return 'click';
})();
 
Button.addEventListener(clickEvent, e => {
 console.log("things happened!")
})

上記は、将来的に皆さんのお役に立てれば幸いです。

関連記事:

WeChatアプレットに指ズーム画像を実装するサンプルコード

vueでのCSSプリロードをベースにしたsassを使った設定方法を詳しく解説

Angular 4.x+Ionic3の落とし穴詳細Ionic3.xのPOP逆値転送の説明

以上がJS のタッチスタート イベントとクリック イベント間の競合の解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。