モバイル端末のタッチイベントを詳しく解説

この記事では、モバイル端末のタッチイベントについて詳しく説明します。必要な方は参考にしてください。

1.touchstart

指が画面に触れるとトリガーされます

dom.addEventListener('touchstart',function(e){});
startX=e.touches[0].clientX;

イベントによって返される e オブジェクトには、モバイル固有の属性が含まれます: e对象包含的移动端特有的属性：
tarchTouches:目标元素的所有当前触摸
changedTouches:页面上最新更改的所有触摸
touches: 页面上所有的触摸

2.touchmove

手指在屏幕上滑动时连续触发

dom.addEventListener('touchmove',function(e){});

事件返回的e对象包含的移动端特有的属性：
tarchTouches:目标元素的所有当前触摸
changedTouches:页面上最新更改的所有触摸
touches: 页面上所有的触摸

3.touchend

当手指离开屏幕时触发

dom.addEventListener('touchend',funciton(e){});
//在touchend中，touches拿不到touch对象，
//因为触摸已经结束，changedTouches中拿到触摸对象
//console.log(e);
//endX=e.touches[0];  undefined 
endX=e.changedTouches[0].clientX;

事件返回的e tarchTouches: ターゲット要素の現在のすべてのタッチ
ChangedTouches:ページの最新の変更に対するすべてのタッチ
タッチ: ページ上のすべてのタッチ
2.touchmove

は、指が画面上をスライドすると継続的にトリガーされます

rrreee

イベントによって返される e オブジェクトには次のものが含まれますモバイル固有の属性:

tarchTouches: ターゲット要素に対する現在のすべてのタッチ
ChangedTouches: ページ上の最新の変更に対するすべてのタッチ
Touchs: ページ上のすべてのタッチ

3.touchend

は、指が画面から離れるとトリガーされます

rrreee

e オブジェクトには、モバイル固有の属性が含まれます。

ChangedTouches: ページ上で最後に変更されたすべてのタッチ touchcancel: システムがタッチの追跡を停止するとトリガーされます。 (あまり使用されません)
タッチエンドイベント中、イベントはchangeTouches

4を通知して記録します。 e.touches[0]

clientX: ビューポート内のタッチターゲットのX座標。 🎜 clientY: ビューポート内のタッチ ターゲットの Y 座標。 🎜 pageX: ページ内のタッチターゲットのx座標。 🎜 pageY: ページ内のタッチターゲットのy座標。 🎜 screenX: 画面上のタッチターゲットのx座標。 🎜 screenY: 画面上のタッチターゲットの Y 座標。 🎜🎜関連する推奨事項: 🎜🎜🎜JavaScript モバイル開発におけるタッチ イベントの詳細な説明_JavaScript スキル🎜🎜🎜🎜🎜モバイル デバイス Web 開発におけるタッチ イベントの Javascript カプセル化の例_JavaScript スキル🎜🎜

以上がモバイル端末のタッチイベントを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。