自行封裝移動端touch事件

網上查閱也參考了幾個示例，感覺有些思路過於繁瑣，自己也是剛接觸前端的小白（去年），於是，爲了鍛鍊下自己的js水平，決定按自己的思路簡單封裝下，功能包括如下：

• touchStart： 觸摸開始
• swipeLeft： 快速左拉
• swipeRight： 快速右拉
• swipeUp： 快速上拉
• swipeDown： 快速下拉
• dragVertical： 垂直方向滑動
• dragHorizontal： 水平方向滑動
• drag： 拖拽
• tag： 輕擊
• longTag： 長按
• touchEnd：觸摸結束

簡單說一下原理

主要就是通過三大事件（touchstart，touchmove，touchend）來判斷用戶的手勢，然後分別派發對應的事件處理函數（自定義的）。首先要清楚幾個問題：

1、輕擊、長按這些事件並不只是在一個點觸發，由於用戶操作習慣的不同，點擊時可能會發生幾個像素偏移，似乎有的手機還有誤差值（沒測試過）；
2、涉及到方向的事件，需要計算角度值，只需要計算出水平、垂直的方向就能得到其它的方向了

角度計算：

如圖，有顏色部分爲垂直方向，其他爲水平方向，A點爲touchstart起始點，B點爲手指，x、y爲橫軸、縱軸位移距離（絕對值）。要計算很簡單咯，首先要處理上面的問題1，既然有誤差，那就讓x或者y大於一個值時再去計算角度，這裏假設爲4（這個值越大越不精準，太小會發生問題1），當手指在一個方向上位移距離>=4，就立即計算角度，然而角度其實也不用計算，直角三角形規律，x和y是相等時是45°，x > y時角度小於45°（B點垂直向下移），也就是水平方向，反之就是垂直方向。就算這裏不取45度角也可以用同一個原理。

//1、判斷水平滑過屏幕條件：x軸必須有位移。位移距離大於4，並且此時x > y

x !== 0 && x >= 4 && x > y

//2、判斷垂直滑過屏幕條件：y軸必須有位移。位移距離大於4，並且此時y > x

y !== 0 && y >= 4 && x < y

//3、判斷向右滑過屏幕條件：滿足條件1時

A.x - B.x < 0

//4、判斷向左滑過屏幕條件：滿足條件1時

A.x - B.x > 0

//5、判斷向上滑過屏幕條件：滿足條件2時

A.y - B.y < 0

//6、判斷向下滑過屏幕條件：滿足條件2時

A.y - B.y > 0

下面是具體代碼，老早以前寫的了，我比較懶 - -，就不改這不上眼的代碼了……，第一回寫文章這東西，交點東西先。預覽地址

/*
使用
    DJ.toucher('#div')
    .on('touchStart', function(e) {
        console.log('touchStart');
    })
    .on('swipeLeft swipeRight swipeUp swipeDown', function(e) {
        console.log('...')
    })
    ...
*/
;(function(w, d, factory) {
    var fn = factory(w, d);

    w.DJ = w.DJ || {};

    w.DJ.toucher = w.DJ.toucher || fn;
})(this, document, function(w, d) {
    "use strict";
    function Djswipe(el) {
        this.elem = d.querySelector(el) || {};
        // 自定義事件庫
        this._events = this._events || {};
        // 記錄垂直或水平方向
        this.dir = false;
        // 處理長按的定時器
        this.ltimer = null;
        this.istouched = false;
    }

    Djswipe.prototype = {
        events: ['touchStart', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown', 'dragVertical', 'dragHorizontal', 'touchEnd', 'drag', 'tag', 'longTag'],
        init: function() {
            this.touch();
            return this;
        },
        //模擬on自定義事件綁定，多事件空格隔開
        on: function(evt, handler) {
            var arrevts = evt.split(' '),
                len = arrevts.length,
                isFunction = typeof(handler) === 'function';
            for(var i=0;i<len;i++) {
                this._events[arrevts[i]] = this._events[arrevts[i]] || [];
                isFunction && this._events[arrevts[i]].push(handler);
            }
            return this;
        },
        //自定義事件觸發器
        trigger: function(evt, e, s) {
            if (!!evt)
                for (var i = 0; evt[i]; evt[i++].call(this.elem, e, s));
        },
        touch: function() {
            var _t = this,
                sx, sy,
                disX, disY;
            this.elem.addEventListener('touchstart', function(e) {
                _t.dir = false;
                _t.istouched = true;
                _t.islongtag = false;
                _t.startTime = new Date();
                sx = e.targetTouches[0].pageX, sy = e.targetTouches[0].pageY;
                // 開始觸摸
                _t.trigger(_t._events.touchStart, e);

                _t.ltimer = setTimeout(function() {
                    // 長按
                    _t.istouched && _t.dir === false && (_t.trigger(_t._events.longTag, e),_t.islongtag = true);
                }, 500);
            }, false);
            this.elem.addEventListener('touchmove', function(e) {
                var mx = e.targetTouches[0].pageX,
                    my = e.targetTouches[0].pageY,
                    x, y;
                disX = mx - sx, disY = my - sy;

                x = Math.abs(disX), y = Math.abs(disY);
                //座標和位移值等，方便外部直接拿到，做其他操作
                var status = {
                    startx: sx,
                    starty: sy,
                    movex: mx,
                    movey: my,
                    disx: disX,
                    disy: disY
                }

                // 水平
                if (x !== 0 && x >= 4 && x > y && _t.dir === false)
                    _t.dir = 0;
                // 垂直
                if (y !== 0 && y >= 4 && x < y && _t.dir === false)
                    _t.dir = 1;
                // 拖拽
                _t.dir !== false && _t.trigger(_t._events.drag, e, status);
                // 水平和垂直滑動
                _t.trigger(_t._events[['dragHorizontal', 'dragVertical'][_t.dir]], e, status);
            }, false);
            this.elem.addEventListener('touchend', function(e) {
                _t.istouched = false;
                _t.disTime = new Date() - _t.startTime;
                clearInterval(_t.ltimer);
                if (_t.disTime < 150) {
                    if (_t.dir === 0) {
                        // 左右
                        disX < 0 && _t.trigger(_t._events.swipeLeft, e);
                        disX > 0 && _t.trigger(_t._events.swipeRight, e);
                    }
                    if (_t.dir === 1) {
                        // 上下
                        disY < 0 && _t.trigger(_t._events.swipeUp, e);
                        disY > 0 && _t.trigger(_t._events.swipeDown, e);
                    }
                    // 輕擊
                    _t.dir === false && _t.trigger(_t._events.tag, e);
                } else {
                    // 處理tag、longtag多餘的間隙
                    (_t.dir !== false || _t.dir === false && _t.islongtag === false) && _t.trigger(_t._events.touchEnd, e);
                }
            }, false);
        }
    };

    return function(el) {
        return new Djswipe(el).init();
    }
});