jsのタッチイベントの実際の参照

モバイル ページのタッチ スクリーンのスライド イベントを調査するのは、jquery の対応するテクニカル サポートを探すのが非常に面倒ですが、js ではタッチ イベントの実際のリファレンスを共有するだけです。 jsの。

私はフロントエンドページの仕事を始めたときにjsに触れましたが、その後、シンプルで効率的なjqueryに魅了され、それ以来それを使用しています。

js に関しては、私は主観的に基盤技術としてそれを放棄しました。

ここ数日、私はモバイルページでのタッチスクリーンのスライドイベントについて勉強していましたが、jquery の対応する技術サポートを探すのは本当に面倒です (もちろん、私が理解していない可能性もあります)。 jquery で十分です)、js では簡単に定義するだけです。

私は js についてあまり詳しくないので、長い間最も単純なアプリケーションを試してきました...js タッチ イベントの実際のリファレンスを共有しましょう:

$(function(){
document.addEventListener("touchmove", _touch, false);
})

function _touch(event){
alert(1);
}

上記のコードでは必然的に jquery のものが使用されますが、jquery を使用しない人は無視してかまいません。

対応するイベントは次のとおりです。

touchstart: 指が画面に触れるとトリガーされます。すでに画面上に指がある場合でもトリガーされます。
touchmove: 指が画面上をスライドすると継続的にトリガーされます。このイベント中に、preventDefault() を呼び出すとスクロールが防止されます。
タッチエンド: 指が画面から離れるとトリガーされます。
touchcancel: システムがタッチの追跡を停止すると発生します。このイベントの正確なトリガーイベントはドキュメントでは明確ではありません。

上記のイベントのイベント オブジェクトには次の属性が存在します。

touches: 現在追跡されているタッチ操作を表す Touch オブジェクトの配列。
targetTouches: イベント ターゲットに固有の Touch オブジェクトの配列。
changeTouches: 最後のタッチ以降に何が変更されたかを示す Touch オブジェクトの配列。

各 Touch オブジェクトには次のプロパティが含まれます:

clientX: ビューポート内のタッチ ターゲットの X 座標。
clientY: ビューポート内のタッチ ターゲットの Y 座標。
識別子: タッチの一意の ID を表します。
pageX: ページ内のタッチ ターゲットの x 座標。
pageY: ページ内のタッチターゲットの Y 座標。
screenX: 画面上のタッチ ターゲットの x 座標。
screenY: 画面上のタッチターゲットの Y 座標。
ターゲット: タッチされた DOM ノードの座標

上記はこの章の全内容です。その他の関連チュートリアルについては、JavaScript ビデオ チュートリアル をご覧ください。