封装判断touch手指滑动方向的函数

最新推荐文章于 2020-09-24 15:00:36 发布

原创最新推荐文章于 2020-09-24 15:00:36 发布 · 328 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#函数 #touch #mobile #手势识别 #前端

移动端开发专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一种基于JavaScript实现的触摸滑动手势识别方法，包括左右、上下等方向的滑动事件触发。通过监听touchstart、touchmove和touchend事件，并计算手指起始位置与结束位置之间的偏移来判断滑动方向。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var toch={
    swipe:function (el,fn){
        var move,starx,stary;
        el.addEventListener('touchstart',function (e){
            var ths=e.touches[0];
            starx=ths.clientX;//获取手指点下去的X坐标
            stary=ths.clientY;//获取手指Y坐标；
            move=false;
        },false);
        el.addEventListener('touchmove',function (e){
            move=true;
            e.preventDefault();//阻止默认事件
        },false);
        el.addEventListener('touchend',function (e){
            if(move==false){
                return;
            }
            var cths=e.changedTouches[0];
            endx=cths.clientX;
            endy=cths.clientY;
            if(Math.abs(starx-endx)>20||Math.abs(stary-endy)>20){
                fn();
            }
        },false);
    },
    swipet:function (el,fn){
        var move,starx,stary;
        el.addEventListener('touchstart',function (e){
            var ths=e.touches[0];
            starx=ths.clientX;//获取手指点下去的X坐标
            stary=ths.clientY;//获取手指Y坐标；
            move=false;
        },false);
        el.addEventListener('touchmove',function (e){
            move=true;
            e.preventDefault();//阻止默认事件
        },false);
        el.addEventListener('touchend',function (e){
            if(move==false){
                return;
            }
            var cths=e.changedTouches[0];
            endx=cths.clientX;
            endy=cths.clientY;
            jlx=starx-endx;
            jly=stary-endy;
            if(Math.abs(jlx)<Math.abs(jly)){
                if(jly>20){
                fn();
            }
            }
        },false);
    },
    swipeb:function (el,fn){
        var move,starx,stary;
        el.addEventListener('touchstart',function (e){
            var ths=e.touches[0];
            starx=ths.clientX;//获取手指点下去的X坐标
            stary=ths.clientY;//获取手指Y坐标；
            move=false;
        },false);
        el.addEventListener('touchmove',function (e){
            move=true;
            e.preventDefault();//阻止默认事件
        },false);
        el.addEventListener('touchend',function (e){
            if(move==false){
                return;
            }
            var cths=e.changedTouches[0];
            endx=cths.clientX;
            endy=cths.clientY;
            jlx=starx-endx;
            jly=stary-endy;
            if(Math.abs(jlx)<Math.abs(jly)){
                if(jly<-20){
                fn();
            }
            }

        },false);
    },
    swipel:function (el,fn){
        var move,starx,stary;
        el.addEventListener('touchstart',function (e){
            var ths=e.touches[0];
            starx=ths.clientX;//获取手指点下去的X坐标
            stary=ths.clientY;//获取手指Y坐标；
            move=false;
        },false);
        el.addEventListener('touchmove',function (e){
            move=true;
            e.preventDefault();//阻止默认事件
        },false);
        el.addEventListener('touchend',function (e){
            if(move==false){
                return;
            }
            var cths=e.changedTouches[0];
            endx=cths.clientX;
            endy=cths.clientY;
            jlx=starx-endx;
            jly=stary-endy;
            if(Math.abs(jlx)>=Math.abs(jly)){
                if(jlx>20){
                fn();
            }
            }

        },false);
    },
    swiper:function (el,fn){
        var move,starx,stary;
        el.addEventListener('touchstart',function (e){
            var ths=e.touches[0];
            starx=ths.clientX;//获取手指点下去的X坐标
            stary=ths.clientY;//获取手指Y坐标；
            move=false;
        },false);
        el.addEventListener('touchmove',function (e){
            move=true;
            e.preventDefault();//阻止默认事件
        },false);
        el.addEventListener('touchend',function (e){
            if(move==false){
                return;
            }
            var cths=e.changedTouches[0];
            endx=cths.clientX;
            endy=cths.clientY;
            jlx=starx-endx;
            jly=stary-endy;
            if(Math.abs(jlx)>=Math.abs(jly)){
                if(jlx<-20){
                fn();
            }
            }

        },false);
    }
}

封装好之后，用的时候怎么用呢？别着急，我给你演示一下
eg：
//判断手势向左滑动的时候，执行某个事件
toch.swipel(document,function (){
$(“.cover”).animate({left:’0px’},200,’swing’);
})
其中swipel，最后一个字母具代表left，right是r，top是t，bottom是b。如果大家觉得真心帮助到了你们，求给博主加把油，登上账号，说句加油也好。如果有错误，也请大家踊跃指出，共同进步，谢谢