移动端touch滑动方向的判断
var slider = {
//判断设备是否支持touch事件
touch:(‘ontouchstart‘ in window) || window.DocumentTouch && document instanceof DocumentTouch,
//事件
events:{
slider:document,
handleEvent:function(event){
if(event.type == ‘touchstart‘){
this.start(event);
}else if(event.type == ‘touchmove‘){
this.move(event);
}else if(event.type == ‘touchend‘){
this.end(event);
}
},
//滑动开始
start:function(event){
//touches数组对象获得屏幕上所有的touch,取第一个touch
var touch = event.targetTouches[0];
//取第一个touch的坐标值
startPos = {x:touch.pageX,y:touch.pageY,time:+new Date};
//这个参数判断是垂直滚动还是水平滚动
isScrolling = 0;
this.slider.addEventListener(‘touchmove‘,this,false);
this.slider.addEventListener(‘touchend‘,this,false);
},
//移动
move:function(event){
//当屏幕有多个touch或者页面被缩放过,就不执行move操作
if(event.targetTouches.length > 1 || event.scale && event.scale !== 1) return;
var touch = event.targetTouches[0];
endPos = {x:touch.pageX - startPos.x,y:touch.pageY - startPos.y};
//isScrolling为1时,表示纵向滑动,0为横向滑动
isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1:0;
if(isScrolling === 1){
//阻止触摸事件的默认行为,即阻止滚屏
event.preventDefault();
}
},
//滑动释放
end:function(event){
//滑动的持续时间
var duration = +new Date - startPos.time;
var i = 0;
if(Number(duration) > 10){
if(isScrolling === 1){
//判断是上移还是下移,当偏移量大于10时执行
if(endPos.y < -10){
i = 1;
}else if(endPos.y > 10){
i = 3;
}
}else if(isScrolling === 0){
//判断是左移还是右移,当偏移量大于10时执行
if(endPos.x > 10){
i = 2;
}else if(endPos.x < -10){
i = 4;
}
}
this.callback(i);
startPos = endPos = null;
return false;
}
//解绑事件
this.slider.removeEventListener(‘touchmove‘,this,false);
this.slider.removeEventListener(‘touchend‘,this,false);
},
//要执行函数
callback:function(direction){
//上右下左1234
switch(direction){
case 1:
alert(‘上‘);
break;
case 2:
alert(‘右‘);
break;
case 3:
alert(‘下‘);
break;
case 4:
alert(‘左‘);
break;
default:
break;
};
},
},
//初始化
init:function(){
if(!!this.touch) this.events.slider.addEventListener(‘touchstart‘,this.events,false);
}
};
slider.init();
如有需要修改的地方或者有别的更好的方法,求大神多多指教,谢谢!
文章来自:http://my.oschina.net/u/2360886/blog/420131