zoukankan      html  css  js  c++  java
  • 模拟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
  • 相关阅读:
    【LeetCode】Binary Tree Upside Down
    【LeetCode】171. Excel Sheet Column Number
    【LeetCode】Longest Substring with At Most Two Distinct Characters (2 solutions)
    【Algorithm】回溯法与深度优先遍历的异同
    【C++】自定义比较函数小结
    【LeetCode】4. Median of Two Sorted Arrays (2 solutions)
    【LeetCode】3. Longest Substring Without Repeating Characters (2 solutions)
    【LeetCode】Add Two Numbers
    【LeetCode】5. Longest Palindromic Substring
    【LeetCode】6. ZigZag Conversion
  • 原文地址:https://www.cnblogs.com/mengff/p/7271475.html
Copyright © 2011-2022 走看看