移动端 Touch 事件

Posted 2020-08-23 星星眨眼

在移动端页面开发时，常常会用到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 + ")")
})