- touch事件
- touchstart事件:按下手指,触发
- touchmove事件:移动手指,触发(在这个事件发生期间,调用preventDefault()事件可以阻止滚动)
- touchend事件:移走手指,触发
- touchcancel事件:当系统停止跟踪触摸的时触发
- touch事件包含下面三个用于跟踪触摸的属性+DOM属性
- touches:表示当前跟踪的触摸操作的touch对象的数组
- targetTouches:特定于事件目标的Touch对象的数组
- changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。
- touch对象的属性
clientX:触摸目标在视口中的x坐标 clientY:触摸目标在视口中的y坐标
pageX:触摸目标在页面中的x坐标 pageY:触摸目标在页面中的y坐标
screenX:触摸目标在屏幕中的x坐标 screenY:触摸目标在屏幕中的y坐标
identifier:标识触摸的唯一ID
target:触摸的DOM节点目标
var startx, starty, endx, endy;
window.addEventListener("touchstart",function(e){
var touch =e.touches[0];
startx = touch.pageX;
starty = touch.pageY;
})
window.addEventListener("touchmove",function(e){
var touch =e.touches[0];
endx = touch.pageX;
endy = touch.pageY;
})
window.addEventListener("touchend",function(e){
var clientx = endx - startx;
var clienty = endy - starty;
if (Math.abs(clientx) > Math.abs(clienty) && clientx > 0) { return"right";}
else if (Math.abs(clientx) > Math.abs(clienty) && clientx < 0) {return"left";}
else if (Math.abs(clientx) < Math.abs(clienty) && clienty > 0) {return"down";}
else if (Math.abs(clientx) < Math.abs(clienty) && clienty < 0) {return"up";}
})