var startX, startY, isStart; //在外部声明startX以用于touchmove和touchend的函数中 $('nav').on('touchstart', function(evt) { //手指按倒屏幕上的坐标 var target = evt.targetTouches[0] || evt.changedTouches[0]; //0表示取第一个手指即单指触摸 startX = target.pageX; startY = target.pageY; isStart = 1; }); $('nav').on('touchmove', function(evt) { //手指滑动到屏幕上的坐标 if(1 !== isStart) { return; } else { isStart = 2; } var target = evt.targetTouches[0] || evt.changedTouches[0]; var moveX = target.pageX; var moveY = target.pageY; var offsetX = moveX - startX; var absX = Math.abs(offsetx); //X方向上的偏移量 var absY = Math.abs(moveY - startY); //Y方向上的偏移量 if(absX > absY) { evt.preventDefault(); //水平滑动时阻止垂直方向的偏移量 } }); $('nav').on('touchend touchcancel', function(evt) { if(2 !== isStart) { return; //若只有点击操作而无滑动则不执行下面操作 } else { isStart = undefined; } var target = evt.targetTouches[0] || evt.changedTouches[0]; var endX = target.pageX; var offsetX = endX - startX; if(offsetX > 30) { prev(); //水平向右滑动超过一定距离执行上一页 } else if(offset < -30) { next(); //水平向左滑动超过一定距离执行下一页 } else { return; } });
通过手指触摸屏幕和离开屏幕的坐标差来定义滑动