/*
author:zhaoyulong
本次封装触屏事件实现触屏操作更加细腻
调用方式:
$(xxx).touchme(event,function(distance,type,axis){
//distance：代表x轴或者y轴偏移（以偏移更多的一个方向为准） 可为正值或负值，代表不同方向的偏移
//type：为move时表示当前触发的是touchmove事件，为click时触发的是touchend事件
//axis：为x代表x轴偏移，为y代表y轴偏移
});
*/
$.fn.touchme = function(event,fn){	
	var startele = $(this);
	var touch = event.targetTouches[0];
	var endPos = false;
	startPos = {x:touch.pageX,y:touch.pageY,time:+new Date};
	isScrolling = 0;
	startele.bind("touchmove",function(event){
		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 = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1:0;
		if(isScrolling === 0){
			event.preventDefault();
			fn(endPos.x,'move','x');	
		}else{			
			event.preventDefault();
			fn(endPos.y,'move','y');	
		}
	});
	startele.bind("touchend",function(event){
		var duration = +new Date - startPos.time;
		if(isScrolling === 0){				
			fn(endPos.x,'click','x');	
		}else{
			fn(endPos.y,'click','y');
		}
		startele.unbind("touchmove");
		startele.unbind("touchend");
	});
};

转载请注明：有爱前端 » 触屏事件封装