移動端 Touch 事件


在移動端頁面開發時,常常會用到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 + ")")
})

  

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM