JS のタッチスタートイベントとクリックイベント間の競合の解決策-jsチュートリアル-php.cn

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

亚连

リリース： 2018-05-31 10:21:42

オリジナル

2148 人が閲覧しました

この記事では、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 (&#39;ontouchstart&#39; in document.documentElement === true)
 return &#39;touchstart&#39;;
 else
 return &#39;click&#39;;
})();
 
Button.addEventListener(clickEvent, e => {
 console.log("things happened!")
})

ログイン後にコピー

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

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

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

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

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