移動端中touch事件的詳解

本篇文章給大家帶來的內容是關於移動端中touch事件的詳解，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

1.touchstart

當手指觸碰螢幕時候觸發

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

事件返回的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對象包含的移動端特有的屬性：
changedTouches:頁面上最新更改的所有觸摸
touchcancel: 系統停止跟蹤觸摸時會觸發。（不經常用）
在touchend事件的時候，event知會記錄changeTouches

4. e.touches[0]

clientX:觸摸目標在視口中的X座標。
clientY:觸摸目標在視口中的Y座標。
pageX：觸摸目標在頁面中的x座標。
pageY：觸摸目標在頁面中的y座標。
screenX:觸摸目標在螢幕中的x座標。
screenY:觸摸目標在螢幕中的y座標。