行動端中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座標。

相關推薦：

javascript行動開發中touch觸控事件詳解_javascript技巧

javascript行動裝置Web開發中對touch事件的封裝實例_javascript技巧

以上是行動端中touch事件的詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！