---- 淘宝优惠券 ----资源下载 ---域名问题某些图片和js资源无法访问,导致一些代码实例无法运行!(代码里gzui.net换成momen.vip即可)

触屏事件封装

前端开发 蚂蚁 2913℃ 0评论
/*
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");
	});
};

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

喜欢 (0)or分享 (0)
发表我的评论
取消评论

表情
(1)个小伙伴在吐槽
  1. http://touch.code.baidu.com/?qq-pf-to=pcqq.c2c 百度的
    朽木2015-09-24 10:38 回复