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
  • 相关阅读:
    x64 平台开发 Mapxtreme 编译错误
    hdu 4305 Lightning
    Ural 1627 Join(生成树计数)
    poj 2104 Kth Number(可持久化线段树)
    ural 1651 Shortest Subchain
    hdu 4351 Digital root
    hdu 3221 Bruteforce Algorithm
    poj 2892 Tunnel Warfare (Splay Tree instead of Segment Tree)
    hdu 4031 Attack(BIT)
    LightOJ 1277 Looking for a Subsequence
  • 原文地址:https://www.cnblogs.com/mengff/p/7271475.html
Copyright © 2011-2022 走看看