移动端触摸处理

写在前面

由于工做须要，编写了个触摸处理的jquery扩展组件用于偷懒。触摸逻辑都要搞晕了
(((φ(◎ロ◎;)φ)))

目的

jq对象，监听该对象的触摸事件，阻止冒泡（避免触发原来的滑动），返回滑动方向，滑动距离，以及本次滑动累计距离

// jQuery扩展组件 touch监控 只返回触摸方向以及偏移程度
(function($){
    var ms = {
        // 屏幕历史点
        touch:{x:0,y:0},
        // 屏幕当前点
        end:{x:0,y:0},
        // 偏移量
        offset:{x:0,y:0},
        // 滑动方向
        touchDirection:'',
        // 单次滑动累计
        touchDir:0,
        // 触摸执行标志
        isTouchmove:false,
        isTouchmoveHandly:'',
        initParam:function(obj,args){
            // 屏幕历史点
            ms.touch = {x:0,y:0};
            // 屏幕当前点
            ms.end = {x:0,y:0};
            // 触摸执行标志
            ms.setIsTouchmove(false);
            // 清除方向
            ms.touchDirection = '';
            // 滑动累计
            ms.touchDir = 0;
        },
        init:function(obj,args){
            return (function(){
                ms.initParam(obj,args);
                ms.bindEvent(obj,args);
                return ms;
            })();
        },
        setIsTouchmove(_bool){
            if(_bool){
                ms.isTouchmove = true;
                ms.isTouchmoveHandly = setTimeout(function(){
                    ms.isTouchmove = false;
                }, commonInitFn.buttonTimeout);
            }else{
                ms.isTouchmove = false;
                clearTimeout(ms.isTouchmoveHandly);
            }
        },
        //绑定事件
        bindEvent:function(obj,args){
            var _ms = ms;
            var _obj = $(obj);
            var dom = _obj[0];

            return (function(){
                //建立dom
                
                dom.addEventListener("touchmove",function(el){
                    // 该处el为item
                    // 不阻止冒泡会致使animate动画失效
                    // 阻止冒泡后要使用模拟滑动
                    el.preventDefault();
                    if(_ms.isTouchmove){
                        return;
                    }
                    _ms.setIsTouchmove(true);

                    //获取触摸滑动位置
                    var touch=el.touches[0];
                    ms.end = {
                        x:parseInt(touch.pageX),
                        y:parseInt(touch.pageY)
                    };
                    // 初始化历史触摸点
                    if(!ms.touchDirection){
                        ms.touch = ms.end;
                        // ms.touchDirection = 1 不是初始化
                        ms.touchDirection = 1;
                    }
                    // 计算位置进行滑动
                    // 当前滑动点 = 历史滑动量 + 触摸偏移量（当前触摸减去历史触摸）
                    ms.offset = {x:-parseInt(ms.end.x - ms.touch.x),y:-parseInt(ms.end.y - ms.touch.y)};
                    // (先上下再左右)
                    // console.log({offset:ms.offset,Direction:ms.touchDirection});
                    if(ms.offset.x != 0 || ms.offset.y != 0){
                        //只有在方向为空或者相同下才能够进行设置
                        if(ms.touchDirection === 1|| 
                            ms.touchDirection === 'top' ||
                            ms.touchDirection === 'bottom'
                            ){
                            if(ms.offset.y < 0){
                                // 向上滑动
                                ms.touchDirection = 'top';
                            }else if(ms.offset.y > 0){
                                // 向下滑动
                                ms.touchDirection = 'bottom';
                            }
                        } 
    
                        //开头的时候还须要判断不是斜的
                        if((ms.touchDirection === 1 &&  ms.offset.y === 0)|| 
                            ms.touchDirection === 'right' ||
                            ms.touchDirection === 'left'){
                            if(ms.offset.x > 0){
                                // 向右滑动
                                ms.touchDirection = 'right';
                            }else if(ms.offset.x < 0){
                                // 向左滑动
                                ms.touchDirection = 'left';
                            }
                        }
                        //累加滑动
                        ms.touchDir++;
                        var temp = {
                            offset:ms.offset,
                            touchDirection:ms.touchDirection,
                            touchDir:ms.touchDir,
                        }

                        ms.touch = ms.end;
    
    
                        if(typeof(args.onTouchMove)=="function"){
                            //构造参数
                            args.onTouchMove(temp);
                        }
                    }
                    ms.setIsTouchmove(false);
                });
                dom.addEventListener("touchstart",function(el){
                    if(typeof(args.onTouchStart)=="function"){
                        //构造参数
                        var temp = {
                            offset:ms.offset,
                            touchDir:ms.touchDir,
                            touchDirection:ms.touchDirection,
                        }
                        args.onTouchStart(temp);
                    }
                });
                dom.addEventListener("touchend",function(el){
                    
                    if(typeof(args.onTouchEnd)=="function"){
                        //构造参数
                        var temp = {
                            offset:ms.offset,
                            touchDir:ms.touchDir,
                            touchDirection:ms.touchDirection,
                        }
                        args.onTouchEnd(temp);
                    }
                    ms.initParam(obj,args)
                });
            })();
        },
    }
    //- {
    //-     onTouchMove: function() {} //返回方向和力度
    //-     onTouchStart: function() {} //返回方向和力度
    //-     onTouchEnd: function() {} //返回方向和力度
    //- }
    $.fn.createTouch = function(options){
        var args = $.extend({
            onTouchMove: function(){},
            onTouchStart:function(){},
            onTouchEnd:function(){},
        },options);
        return ms.init(this,args);
    }
})(jQuery);

轻拍