JavaScriptノート(touchイベント)

参考記事:『touch事件のtouchesとtarget Touchesとchanged Touchesの詳細』、『モバイルインターネット端末のtouch事件、touch start、touchend、touchmove』
1タッチイベントtouchstart、touchmove、touchend、この3つは、モバイルデバイスが広く実現する基本的なタッチイベントであり、3つの組み合わせによって、「長押」、「クリック」、「スライド」などのモバイル端末の特定の動作が完了することができる.

touchstartイベント:指がスクリーンのDOMオブジェクトに触れるとき.

touchmoveイベント:指が画面のDOMオブジェクトに触れた後、ドラッグします.

touchendイベント:指がスクリーンから離れるとき

1.1タッチリスト
以上のtouchstart、touchmove、touchendの各イベントは3つのタッチリストを持っています.

touches:現在のスクリーンのすべてのタッチポイントのリスト.

targetTouches:現在のオブジェクトのすべてのタッチポイントのリスト.

changedTouches:現在(誘発)イベントに関するタッチポイントのリスト

以上の3つのタッチリストの説明を例に挙げて説明する.1、1つの指を使って画面にタッチし、イベントをトリガすると、3つのリスト属性は同じ値を持つ.2、ケース1の場合、第二の指で画面にタッチしてイベントをトリガする場合、各リストの属性は以下の通りです.

touches:2つの要素を持ち、各指のタッチポイントは1つの要素値

である.

targetTouches:この2つの指が同じ要素に触れた場合、touchesとtargetTouchesの要素値は同じである.そうでなければ、1つの要素値

しかない.

changeTouches:changedTouchesこの時は一つの要素値しかないです.第二の指のタッチポイントです.第二の指がイベントの原因です.
3、2つの指で同時にスクリーンに接触した場合、changedTouchesには2つの値があり、各指のタッチポイントには1つの値があります.4、指がスライドすると、3つの値が変化します.5、1つの指がスクリーンから離れます.touchesとtargetTouchesに対応する要素は同時に除去されます.changedTouchesは依然として元素値があります.この値はスクリーンを離れた最後の指の接触点です.
1.2接点座標の取得
1、touchstartおよびtouchmoveは、使用する:e.targetTouches[0].pageXまたはe.originalEvent.targetTouches[0].pageX(jqueryを使用する)
2、touchend使用:e.changedTouches[0].pageXまたはe.originalEvent.changedTouches[0].pageX(jqueryを使用)
転載先:https://www.cnblogs.com/AB786883603/p/8325379.html