タッチイベントの解析とカプセル化に関する知識

タッチイベント分析

1. touchstartイベント: すでに画面上に指がある場合でも、指が画面に触れるとトリガーされます。

2. touchmoveイベント: 指が画面上をスライドすると継続的にトリガーされます。このイベント中に、preventDefault() イベントを呼び出すと、スクロールを防ぐことができます。

3. touchendイベント: 指が画面から離れるとトリガーされます。

4. touchcancelイベント: システムがタッチの追跡を停止するとトリガーされます。このイベントの正確な出発時間については、文書に具体的な説明がないため、推測するしかありません。

上記のイベントは突然発生し、すべてキャンセルされる可能性があります。これらのタッチ イベントは DOM 仕様では定義されていませんが、DOM 互換の方法で実装されています。したがって、各タッチ イベントのイベント オブジェクトは、マウスの実践において共通の属性を提供します。バブル (バブル イベントのタイプ)、キャンセル可能 (イベントに関連付けられたデフォルト アクションをキャンセルするために、preventDefault() メソッドを使用できるかどうか)、clientX (戻り値イベントがトリガーされたとき、マウス ポインターの水平座標)、clientY (イベントがトリガーされたときのマウス ポインターの垂直座標を返す)、screenX (イベントがトリガーされたとき、マウス ポインターの水平座標)、および screenY (イベントがトリガーされたときに返されます) イベントがトリガーされたときのマウス ポインターの垂直座標)。共通の DOM プロパティに加えて、タッチ イベントには、タッチを追跡するための次の 3 つのプロパティも含まれています。

• touches: 現在追跡されているタッチ操作を表すタッチオブジェクトの配列。

• targetTouches: 現在の要素のイベントをトリガーする Touch オブジェクトの配列。

• changeTouches: 最後のタッチ以降に何が変更されたかを表す Touch オブジェクトの配列。

各 Touch オブジェクトに含まれるプロパティは次のとおりです。

clientX: ビューポート内のタッチターゲットのx座標。

clientY: ビューポート内のタッチターゲットのy座標。

識別子: タッチを識別する一意のID。

pageX: ページ内のタッチターゲットのx座標。

pageY: ページ内のタッチターゲットのy座標。

screenX: 画面内のタッチターゲットのx座標。

screenY: 画面内のタッチターゲットのy座標。

target: 目を引くDOMノードターゲット。

以上がタッチイベントの解析とカプセル化に関する知識の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。