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

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

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

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

3.touchend

rrreee

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

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

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