在移動端頁面開發時,常常會用到touch事件,比如左滑右滑的輪播等。常用的觸摸事件有touchstart
,touchmove
,touchend。
每個事件包含下面三個用於跟蹤虎摸的屬性:
touches:表示當前跟蹤的觸摸操作的touch對象的數組。
targetTouches:特定於事件目標的Touch對象的數組。
changeTouches:表示自上次觸摸以來發生了什么改變的Touch對象的數組。
每個touch事件包含下面的屬性:
clientX:觸摸目標在視口中的x坐標。
clientY:觸摸目標在視口中的y坐標。
identifier:標識觸摸的唯一ID。
pageX:觸摸目標在頁面中的x坐標。
pageY:觸摸目標在頁面中的y坐標。
screenX:觸摸目標在屏幕中的x坐標。
screenY:觸摸目標在屏幕中的y坐標。
target:觸摸的DOM節點目標。
例如:
$(document).on('touchstart',function(e){
alert("開始滑動(" + e.touches[0].clientX + "," + e.touches[0].clientY + ")")
});
$(document).on('touchmove',function(e){
alert("滑動中(" + e.changeTouches[0].clientX + "," + e.changeTouches[0].clientY + ")")
});
$(document).on('touchend',function(e){
alert("滑動結束(" + e.touches[0].clientX + "," + e.touches[0].clientY + ")")
})