移動端觸摸處理

寫在前面

由於工做須要，編寫了個觸摸處理的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);

輕拍