通过html5 touch事件封装手势识别组件

Posted 2020-06-12

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;