模擬tap事件和longTap事件

移動端模擬tap和longTap事件，基本原理就是在touchstart和touchend事件中，計算觸控的位移和時間差，位移在一定範圍內(輕微滑動)，時間小於150ms為tap事件，時間大於300ms為longTap事件。

(function(){
    var TOUCHSTART, TOUCHEND;
    if (typeof(window.ontouchstart) != 'undefined') {
        TOUCHSTART = 'touchstart';
        TOUCHEND = 'touchend';
        TOUCHMOVE='touchmove';

    } else if (typeof(window.onmspointerdown) != 'undefined') {
        TOUCHSTART = 'MSPointerDown';
        TOUCHEND = 'MSPointerUp';
        TOUCHMOVE='MSPointerMove';
    } else {
        TOUCHSTART = 'mousedown';
        TOUCHEND = 'mouseup';
        TOUCHMOVE = 'mousemove';
    }
    function tap(node,callback,scope) {
        var x,y,startTime=0,endTime=0,in_dis=false,bMoved=false;
        node.addEventListener('touchstart', function(e) {
            x = e.touches[0].pageX;
            y = e.touches[0].pageY;
            startTime= +new Date();
        });
        //完全不滑動
        // node.addEventListener('touchmove',function(e){
        //     bMoved = true;
        // });
        node.addEventListener('touchend', function(e) {
            e.stopPropagation();
            e.preventDefault();
            var bDisabled = hasClass(node,'disable') || hasClass(node,'disabled') || node.disabled;
            if(!bDisabled){
                var curx = e.changedTouches[0].pageX;
                var cury = e.changedTouches[0].pageY;
                //輕微滑動
                if (Math.abs(curx - x) < 6 && Math.abs(cury - y) < 6) {
                    in_dis=true;
                }else{
                    in_dis=false;
                }
                //or 完全不滑動
                //in_dis = !bMoved;
                endTime= +new Date();
                if (endTime - startTime < 150 && in_dis) {
                    callback.apply(scope, arguments);
                }
            }
            /*充值引數*/
            startTime = 0;
            in_dis = false;        
            //bMoved = false;
        });
    }

    function longTap(node,callback,scope) {
        var x,y,startTime=0,endTime=0,in_dis=false;
        node.addEventListener(TOUCHSTART, function(e) {
            x = e.touches[0].pageX;
            y = e.touches[0].pageY;
            startTime = +new Date();
        });
        node.addEventListener(TOUCHEND, function(e) {
            e.stopPropagation();
            e.preventDefault();
            var bDisabled = hasClass(node,'disable') || hasClass(node,'disabled') || node.disabled;
            if(!bDisabled){
                var curx = e.changedTouches[0].pageX;
                var cury = e.changedTouches[0].pageY;
                if (Math.abs(curx - x) < 6 && Math.abs(cury - y) < 6) {
                    in_dis=true;
                }else{
                    in_dis=false;
                }
                endTime = +new Date();
                if (endTime - startTime > 300 && in_dis) {
                    callback.apply(scope, arguments);
                }
            }
            /*重置引數*/
            startTime = 0;
            in_dis = false;
        });
    }

    function hasClass(el, cls) {
        if (!el || !cls) return false;
        if (cls.indexOf(' ') != -1) throw new Error('className should not contain space.');
        if (el.classList) {
            return el.classList.contains(cls);
        } else {
            return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1;
        }
    }

    window.touch = {
        tap: tap,
        longTap: longTap
    }
});

 

參考：http://www.cnblogs.com/hutuzhu/archive/2016/03/25/5315638.html

　　   https://segmentfault.com/a/1190000006109728

　　   http://www.cnblogs.com/199316xu/p/6479566.html