模拟tap事件和longTap事件

Posted 2020-09-30 等风来

移动端模拟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