前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >PC和移动端判断鼠标(手指)滑动方向(touch方向)

PC和移动端判断鼠标(手指)滑动方向(touch方向)

原创
作者头像
IT工作者
发布2022-02-24 18:00:53
1.5K0
发布2022-02-24 18:00:53
举报
文章被收录于专栏:程序技术知识程序技术知识
代码语言:javascript
复制
//移动端
$(".demo").on("touchstart", function(e) {
    e.preventDefault();
    startX = e.originalEvent.changedTouches[0].pageX,
    startY = e.originalEvent.changedTouches[0].pageY;
  });
  $(".demo").on("touchmove", function(e) {
    e.preventDefault();
    moveEndX = e.originalEvent.changedTouches[0].pageX,
    moveEndY = e.originalEvent.changedTouches[0].pageY,
    X = moveEndX - startX,
    Y = moveEndY - startY;
 
    if ( X > 0 ) {
      console.log("left -> right");
    }else{
      console.log("right -> left");
    }
   });
 
 
//pc端
$(".demo").mousedown(function(e){
    e.preventDefault();
    startX=e.pageX;
    startY=e.pageY;
    $(this).mousemove(function(e){
        e.preventDefault();
        moveEndX=e.pageX;
        moveEndY=e.pageY;
 
        X=moveEndX-startX;
        Y=moveEndY-startY;
        if(X>0){
            console.log("left -> right");
        }else{
            console.log("right -> left");
        }
    })
}).mouseup(function(){
    $(this).off("mousemove")
})

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档