移动端touch事件

var touchEvent = {}

touchEvent =function() {
    var self=this;
    /*单次触摸事件*/
    self.tap=function(element, fn) {
        var startTx, startTy;
        element.addEventListener('touchstart', function(e) {
            var touches = e.touches[0];
            startTx = touches.clientX;
            startTy = touches.clientY;
        }, false);

        element.addEventListener('touchend', function(e) {
            var touches = e.changedTouches[0],
                endTx = touches.clientX,
                endTy = touches.clientY;
            // 在部分设备上 touch 事件比较灵敏，导致按下和松开手指时的事件坐标会出现一点点变化
            if(Math.abs(startTx - endTx) < 6 && Math.abs(startTy - endTy) < 6) {
                fn();
            }
        }, false);
    },

    /*两次触摸事件*/
    self.doubleTap=function(element, fn) {
        var isTouchEnd = false,
            lastTime = 0,
            lastTx = null,
            lastTy = null,
            firstTouchEnd = true,
            body = document.body,
            dTapTimer, startTx, startTy, startTime;
        element.addEventListener('touchstart', function(e) {
            if(dTapTimer) {
                clearTimeout(dTapTimer);
                dTapTimer = null;
            }
            var touches = e.touches[0];
            startTx = touches.clientX;
            startTy = touches.clientY;
        }, false);
        element.addEventListener('touchend', function(e) {
            var touches = e.changedTouches[0],
                endTx = touches.clientX,
                endTy = touches.clientY,
                now = Date.now(),
                duration = now - lastTime;
            // 首先要确保能触发单次的 tap 事件
            if(Math.abs(startTx - endTx) < 6 && Math.abs(startTx - endTx) < 6) {
                // 两次 tap 的间隔确保在 500 毫秒以内
                if(duration < 301) {
                    // 本次的 tap 位置和上一次的 tap 的位置允许一定范围内的误差
                    if(lastTx !== null &&
                        Math.abs(lastTx - endTx) < 45 &&
                        Math.abs(lastTy - endTy) < 45) {
                        firstTouchEnd = true;
                        lastTx = lastTy = null;
                        fn();
                    }
                } else {
                    lastTx = endTx;
                    lastTy = endTy;
                }
            } else {
                firstTouchEnd = true;
                lastTx = lastTy = null;
            }
            lastTime = now;
        }, false);
        // 在 iOS 的 safari 上手指敲击屏幕的速度过快，
        // 有一定的几率会导致第二次不会响应 touchstart 和 touchend 事件
        // 同时手指长时间的touch不会触发click
        if(~navigator.userAgent.toLowerCase().indexOf('iphone os')) {
            body.addEventListener('touchstart', function(e) {
                startTime = Date.now();
            }, true);
            body.addEventListener('touchend', function(e) {
                var noLongTap = Date.now() - startTime < 501;
                if(firstTouchEnd) {
                    firstTouchEnd = false;
                    if(noLongTap && e.target === element) {
                        dTapTimer = setTimeout(function() {
                            firstTouchEnd = true;
                            lastTx = lastTy = null;
                            fn();
                        }, 400);
                    }
                } else {
                    firstTouchEnd = true;
                }
            }, true);
            // iOS 上手指多次敲击屏幕时的速度过快不会触发 click 事件
            element.addEventListener('click', function(e) {
                if(dTapTimer) {
                    clearTimeout(dTapTimer);
                    dTapTimer = null;
                    firstTouchEnd = true;
                }
            }, false);
        }
    },

    /*长按事件*/
    self.longTap=function(element, fn) {
        var startTx, startTy, lTapTimer;
        element.addEventListener('touchstart', function(e) {
            if(lTapTimer) {
                clearTimeout(lTapTimer);
                lTapTimer = null;
            }
            var touches = e.touches[0];
            startTx = touches.clientX;
            startTy = touches.clientY;
            lTapTimer = setTimeout(function() {
                fn();
            }, 1000);
            e.preventDefault();
        }, false);
        element.addEventListener('touchmove', function(e) {
            var touches = e.touches[0],
                endTx = touches.clientX,
                endTy = touches.clientY;
            if(lTapTimer && (Math.abs(endTx - startTx) > 5 || Math.abs(endTy - startTy) > 5)) {
                clearTimeout(lTapTimer);
                lTapTimer = null;
            }
        }, false);
        element.addEventListener('touchend', function(e) {
            if(lTapTimer) {
                clearTimeout(lTapTimer);
                lTapTimer = null;
            }
        }, false);
    },

    /*滑屏事件*/
    self.swipe= function(element, fn) {
        var isTouchMove, startTx, startTy;
        element.addEventListener('touchstart', function(e) {
            var touches = e.touches[0];
            startTx = touches.clientX;
            startTy = touches.clientY;
            isTouchMove = false;
        }, false);
        element.addEventListener('touchmove', function(e) {
            isTouchMove = true;
            e.preventDefault();
        }, false);
        element.addEventListener('touchend', function(e) {
            if(!isTouchMove) {
                return;
            }
            var touches = e.changedTouches[0],
                endTx = touches.clientX,
                endTy = touches.clientY,
                distanceX = startTx - endTx
            distanceY = startTy - endTy,
                isSwipe = false;
            if(Math.abs(distanceX) > 20 || Math.abs(distanceY) > 20) {
                fn();
            }
        }, false);
    },

    /*向上滑动事件*/
    self.swipeUp=function(element, fn) {
        var isTouchMove, startTx, startTy;
        element.addEventListener('touchstart', function(e) {
            var touches = e.touches[0];
            startTx = touches.clientX;
            startTy = touches.clientY;
            isTouchMove = false;
        }, false);
        element.addEventListener('touchmove', function(e) {
            isTouchMove = true;
            e.preventDefault();
        }, false);
        element.addEventListener('touchend', function(e) {
            if(!isTouchMove) {
                return;
            }
            var touches = e.changedTouches[0],
                endTx = touches.clientX,
                endTy = touches.clientY,
                distanceX = startTx - endTx
            distanceY = startTy - endTy,
                isSwipe = false;
            if(Math.abs(distanceX) < Math.abs(distanceY)) {
                if(distanceY > 20) {
                    fn();
                    isSwipe = true;
                }
            }
        }, false);
    },

    /*向下滑动事件*/
    self.swipeDown= function(element, fn) {
        var isTouchMove, startTx, startTy;
        element.addEventListener('touchstart', function(e) {
            var touches = e.touches[0];
            startTx = touches.clientX;
            startTy = touches.clientY;
            isTouchMove = false;
        }, false);
        element.addEventListener('touchmove', function(e) {
            isTouchMove = true;
            e.preventDefault();
        }, false);
        element.addEventListener('touchend', function(e) {
            if(!isTouchMove) {
                return;
            }
            var touches = e.changedTouches[0],
                endTx = touches.clientX,
                endTy = touches.clientY,
                distanceX = startTx - endTx
            distanceY = startTy - endTy,
                isSwipe = false;
            if(Math.abs(distanceX) < Math.abs(distanceY)) {
                if(distanceY < -20) {
                    fn();
                    isSwipe = true;
                }
            }
        }, false);
    },

    /*向左滑动事件*/
    self.swipeLeft= function(element, fn) {
        var isTouchMove, startTx, startTy;
        element.addEventListener('touchstart', function(e) {
            var touches = e.touches[0];
            startTx = touches.clientX;
            startTy = touches.clientY;
            isTouchMove = false;
        }, false);
        element.addEventListener('touchmove', function(e) {
            isTouchMove = true;
            e.preventDefault();
        }, false);
        element.addEventListener('touchend', function(e) {
            if(!isTouchMove) {
                return;
            }
            var touches = e.changedTouches[0],
                endTx = touches.clientX,
                endTy = touches.clientY,
                distanceX = startTx - endTx
            distanceY = startTy - endTy,
                isSwipe = false;
            if(Math.abs(distanceX) >= Math.abs(distanceY)) {
                if(distanceX > 20) {
                    fn();
                    isSwipe = true;
                }
            }
        }, false);
    },

    /*向右滑动事件*/
    self.swipeRight= function(element, fn) {
        var isTouchMove, startTx, startTy;
        element.addEventListener('touchstart', function(e) {
            var touches = e.touches[0];
            startTx = touches.clientX;
            startTy = touches.clientY;
            isTouchMove = false;
        }, false);
        element.addEventListener('touchmove', function(e) {
            isTouchMove = true;
            e.preventDefault();
        }, false);
        element.addEventListener('touchend', function(e) {
            if(!isTouchMove) {
                return;
            }
            var touches = e.changedTouches[0],
                endTx = touches.clientX,
                endTy = touches.clientY,
                distanceX = startTx - endTx
            distanceY = startTy - endTy,
                isSwipe = false;
            if(Math.abs(distanceX) >= Math.abs(distanceY)) {
                if(distanceX < -20) {
                    fn();
                    isSwipe = true;
                }
            }
        }, false);
    }

}