html5移动端新增了touchstart,touchmove,touchend事件，利用这3个事件，判断手指的点击和划动轨迹，我们可以封装各种手势的识别功能，
这3个事件和pc端的mousedown,mousemove,mouveup非常类似，不同的是touch事件可以有多个点击的点，而鼠标每次只有一个点，我们即然是做组件封装，就要考虑在pc上调试的情况，否则用手机调试非常不方便，通过对mouse事件的处理，可以一套代码同时兼容pc端和移动端。
下面来逐步封装一个滑动手势（swipe）的组件
1.判断是否触摸屏
我们使用能力检测，检测是否支持touchstart事件，就可以知道是否是触摸屏，因为触摸事件可以通过document.ontouchstart=function(){} 这样的方式定义，用in操作符判断即可，对于win8，触屏能力会在navigator对象中生成一个msPointerEnabled属性。
if ('ontouchstart' in window || 'ontouchstart' in document) { //iOS & android supportsTouch = true; } else if(window.navigator.msPointerEnabled) { //Win8 supportsTouch = true; } 2.同时兼容鼠标和触摸屏的事件绑定
我们根据上一步的判断，如果支持toucestart就绑定对应的touchstart,touchmove,touchend事件，如果不支持，则绑定对应的3个鼠标事件if(isSupportTouch()){el.addEventListener('touchstart',touchStart);el.addEventListener('touchend',touchEnd);el.addEventListener('touchmove',touchMove);}else{el.addEventListener('mousedown',touchStart);el.addEventListener('mouseup',touchEnd);el.addEventListener('mousemove',touchMove);}
3.获取点击的点位置信息（兼容鼠标和触摸屏）
从事件参数中可以得到位置信息，如果是鼠标，则通过e.pageX,e.pageY获取点击位置相对于页面根节点的坐标，如果是触摸屏，则e.touches对象是一个点击点位置的数组，包含多个手指的点击位置，我们暂时只处理一只手指的情况，所以取e.touches[0].pageX,e.touches[0].pageY.
function touchStart(e){var t=e.touches?e.touches[0]:e;startPoint={x:t.pageX,y:t.pageY};}
4.判断手指滑动方向
在toucemove事件中判断手指划动，toucemove事件会连续触发，为了过滤掉划动距离太短的无效滑动，我们可以判断pageX和pageY和上一次位置的偏移量超过两个像素才认为是有效事件，然后再判断滑动方向，当前点击位置的(x,y)坐标，减去上一个位置的(x,y)坐标，如果x轴的差值大，就认为是左右滑，如果是y轴的差值大就认为是上下滑，再进一步判断差值 为正数则是左或上，差值为负数则为右或下。代码如下：
function getSwipeDirection(x1, x2, y1, y2) {return Math.abs(x1 - x2) >=Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'left' : 'right') : (y1 - y2 >0 ? 'up' : 'down')}
5.jquery插件封装
为了更方便使用，可以封装成jquery插件，我们常说的jquery对象其实是指继随自jquery原型的对象，jquery的原型是指$.fn,只要扩展$.fn即可，
如$.fn.methodName=function(){//code}
或用$.fn.extend({
methodName:funciton(){//code}
})
完整代码如下：
function TouchEvent(){ var self=this,element=$(this); var el=element[0],isTouching,isSwipe,startTime,startPoint,currentPoint; if(arguments.length>1){ var eventType=arguments[0]; } var callback=arguments[arguments.length-1]; function doAction(type,args){ args.type=type; if(eventType){ if(eventType==type){ callback.call(self,args); } }else{ callback.call(self,args); } } function getSwipeDirection(x1, x2, y1, y2) { return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'left' : 'right') : (y1 - y2 >0 ? 'up' : 'down') } function isSupportTouch(){ var supportsTouch = false; if ('ontouchstart' in window || 'ontouchstart' in document) { //iOS & android supportsTouch = true; } else if(window.navigator.msPointerEnabled) { //Win8 supportsTouch = true; } return supportsTouch; } function touchStart(e){ isTouching=true; startTime=new Date(); var t=e.touches?e.touches[0]:e; startPoint={x:t.pageX,y:t.pageY}; } function touchMove(e){ if(isTouching){ var t=e.touches?e.touches[0]:e; var p={x:t.pageX,y:t.pageY}; currentPoint=p; var x1=startPoint.x,x2=currentPoint.x,y1=startPoint.y,y2=currentPoint.y; if(Math.abs(x1-x2)>2 || Math.abs(y1-y2)>2){ isSwipe=true; var direction=getSwipeDirection(x1,x2,y1,y2); //console.log(direction); e.direction=direction; doAction("swipe",e); } } } function touchEnd(e){ isTouching=false; if(!isSwipe){ e["long"]=new Date()-startTime>1000; doAction("tap",e); //console.log("tap"); }else{ var x1=startPoint.x,x2=currentPoint.x,y1=startPoint.y,y2=currentPoint.y; var direction=getSwipeDirection(x1,x2,y1,y2); console.log(direction) doAction("swipeEnd",{direction:direction}); } isSwipe=false; } if(isSupportTouch()){ el.addEventListener('touchstart',touchStart); el.addEventListener('touchend',touchEnd); el.addEventListener('touchmove',touchMove); //el.addEventListener('touchcancel',actionFinsh); }else{ el.addEventListener('mousedown',touchStart); el.addEventListener('mouseup',touchEnd); el.addEventListener('mousemove',touchMove); }} $.fn.touchEvent = TouchEvent;