《移动端浏览器Touch事件判断手指滑动方向方法》

时间:2022-10-09 10:06:41
 $("body").on("touchstart", function(e) {
    e.preventDefault();
    startX = e.originalEvent.changedTouches[0].pageX,
    startY = e.originalEvent.changedTouches[0].pageY;
});
$("body").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 ( Math.abs(X) > Math.abs(Y) && X > 0 ) {
        alert("left 2 right");
    }
    else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {
        alert("right 2 left");
    }
    else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {
        alert("top 2 bottom");
    }
    else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {
        alert("bottom 2 top");
    }
    else{
        alert("just touch");
    }
});

测试例子可以点击这里进行访问:判断手指滑动方向DEMO

《移动端浏览器Touch事件判断手指滑动方向方法》的更多相关文章

  1. 对于移动端浏览器touch事件的研究总结(4)判断手指滑动方向

    最近有一些微信的项目,虽然页面很简单,但配合手势后的效果却是很不错的.最基本的效果就是手指向上滑,页面配合css3出现一个展开效果,手指向下滑将展开的内容按原路径收起.其实就是一个简单的判断手指滑动方 ...

  2. jquery判断手指滑动方向

    jquery判断手指滑动方向 <pre> /*判断哪个滑动方向还是自己改下 要么上下 要么左右*/ var startX; var startY; $(".shanghua&qu ...

  3. 移动端 uni-app 滑动事件 精确判断手指滑动方向

    移动端根据手指滑动操作判断滑动方向 设计思路: 1.根据移动端touchstart和touchend方法获取手指触摸屏幕的开始坐标和结束坐标 2.根据两个坐标计算与水平方向的夹角 3.根据夹角判断当前 ...

  4. 移动端浏览器touch事件的研究总结

    $("body").on("touchstart", function(e) {     e.preventDefault();     startX = e. ...

  5. js判断手指滑动方向(移动端)

    var startx, starty; //获得角度 function getAngle(angx, angy) { return Math.atan2(angy, angx) * 180 / Mat ...

  6. H5案例分享:移动端touch事件判断滑屏手势的方向

    移动端touch事件判断滑屏手势的方向 方法一 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标 ...

  7. 移动端的touch事件(一)

    如果我们允许用户在页面上用类似桌面浏览器鼠标手势的方式来控制WEB APP,这个页面上肯定是有很多可点击区域的,如果用户触摸到了那些可点击区域怎么办呢?? 诸如智能手机和平板电脑一类的移动设备通常会有 ...

  8. 用HTML和javascript&lpar;JS&rpar;计算触屏手机手指滑动方向的演示

    移动终端的流行,程序员希望通过HTML+JS完成触屏动作的识别.下面给出具体实现的例子,供大家参考. 将下面的代码复制并保存,用手机访问,现在的手机浏览器一般都支持触屏,针对本演示来讲就是支持三个js ...

  9. 浅谈移动端之touch事件--手指的滑动事件

    今天台风‘海马’袭击深圳,全市停工.现分享一篇关于touch的文章,望指教! 原理: 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touch ...

随机推荐

  1. 新建jfinal2&period;2项目并连接mysql

    一新建项目 1. new→Dynamic  Web Project 2修改Default Output Folder.一般用WebRoot\WEB-INF\class,然后下一步(注意路径要写对,不然 ...

  2. Introduction to replication 翻译

    翻译自用,还有很多谬误之处,敬请甄别,转载请注明出处 Introduction to replication (replication介绍)   Replication is one of the m ...

  3. PL&sol;SQL 听课笔记

    PL/SQL: 知识回顾: SQL:  结构化查询语言: T-SQL:  microsoft sql语言: PL/SQL: Oracle sql语言: 变量命名规则: 1.首字母必须是字母,可以包含字 ...

  4. Qt3D教程

    美其名曰教程 其实就是自己的学习之旅 惯例第一章是qt3d的安装 首先说下环境 Windows_Xp_sp3 下载链接 Qt library 4.8.5 下载链接 (在安装Qt library之前,需 ...

  5. centos7&period;2 python2&period;7升级python3&period;6退格键不能用

    yum install readline-devel ./configure  --prefix=/usr/py/py3.6    (目录是自定义的这个根据实际情况来) make && ...

  6. 4027&period; &lbrack;HEOI2015&rsqb;兔子与樱花【树形DP】

    Description 很久很久之前,森林里住着一群兔子.有一天,兔子们突然决定要去看樱花.兔子们所在森林里的樱花树很特殊.樱花树由n个树枝分叉点组成,编号从0到n-1,这n个分叉点由n-1个树枝连接 ...

  7. iOS根据文字字数动态确定Label宽高

    我们有时候在写项目的时候,会碰到,意见反馈,还有其他地方,讲座活动细则等需要大篇展示的文本, 因为每次服务器返回的内容大小不一,所以需要动态的调整label的宽高: 在ios 6 的时候可以: -(v ...

  8. sed 命令编辑文本

    1.sed 概述 sed 是一个非交互式文本编辑器.它能够对文本文件和标准输入进行编辑,标准输入能够是来自键盘输入.文件重定向.字符串.变量.甚至来自于管道文本. 2.sed工作流程简述 sed在处理 ...

  9. 解决FileUpload上传大文件报错

    <system.webServer> <security> <requestFiltering> <requestLimits maxAllowedConte ...

  10. iOS页面跳转及数据传递

    转: http://blog.csdn.net/wang9834664/article/details/8025571 iOS页面跳转: 第一种 [self.navigationController  ...