最近有个需求要用js监控移动端的用户触屏操作,就查了一下,常用的有三个函数,这里记录一下
其中还有一些参数需要提前了解一下
touches: //当前屏幕上所有手指的列表
targetTouches: //当前dom元素上手指的列表,尽量使用这个代替touches
changedTouches: //涉及当前事件的手指的列表,尽量使用这个代替touches
这些列表里的每次触摸由touch对象组成,touch对象里包含着触摸信息,主要属性如下:
clientX / clientY: //触摸点相对浏览器窗口的位置
pageX / pageY: //触摸点相对于页面的位置
screenX / screenY: //触摸点相对于屏幕的位置
identifier: //touch对象的ID
target: //当前的DOM元素
1.touchstart: //手指触屏开始的函数
案例:
$(window).on('touchstart', function(event) {
// alert(666);
var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch,取第一个touch
startPos = {x:touch.pageX,y:touch.pageY,time:+new Date}; //取第一个touch的坐标值
isScrolling = 0; //这个参数判断是垂直滚动还是水平滚动
this.slider.addEventListener('touchmove',this,false);
this.slider.addEventListener('touchend',this,false);
});
我只用到了第一个函数,但其他函数以后也可能用到,这里记录一下
2. touchmove: //手指在屏幕上滑动式触发
3.touchend: //手指离开屏幕时触发
4.touchcancel: //系统取消touch事件的时候触发,这个好像比较少用