$("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. 移动端浏览器touch事件的研究总结

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

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

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

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

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

  5. 用HTML和javascript(JS)计算触屏手机手指滑动方向的演示

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

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

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

  7. 实现移动端touch事件的横向滑动列表效果

    要实现手机端横向滑动效果并不难,了解实现的原理及业务逻辑就很容易实现.原理:touchstart(手指按下瞬间获取相对于页面的位置)——>touchmove(手指移动多少,元素相应移动多少). ...

  8. 移动端 js touch事件

    随着智能手机和平板电脑的普及, 越来越多的人用移动设备浏览网页,我们平时在pc浏览器上用的鼠标事件,比如:click, mouseover等, 已经无法满足移动设备触摸屏的特点,触摸时代的到来,离不开 ...

  9. 简易封装手机浏览器touch事件

    做手机开发时候,简单想用一些动作,如touchLeft,touchRight等, 使用其他库文件就要加载很多不必要的东西,流量的浪费 今天简单写了封装touch的库,简单的监听一些逻辑 onTouch ...

随机推荐

  1. 不得不喷一下中控科技,ZKT,恶心的中控,售后技术和屎一样,半年不见人。

    要做一个指纹考勤机和后台通信写入到mysql.在淘宝看了好多款,于是决定用指纹考勤机w6.卖家当时说支持二次开发,给我发的sdk.于是买了一台测试.机器来了开始测试,使用发的demo不能使用,于是去中 ...

  2. android开发中遇到的各种问题收集--不定期更新

    以下问题都是自己在开发中亲身碰到的 ,在这里留个备份,方便下次查阅. 1.java.lang.IllegalStateException ,Cannot execute task: the task ...

  3. C++中using的作用

    [转自] http://www.cnblogs.com/yuaqua/archive/2011/10/22/2219991.html 1.在当前文件中引入命名空间 这是我们最熟悉的用法,例如:usin ...

  4. Share SDK分享

    import android.app.Activity; import android.os.Bundle; import android.os.Handler; import android.os. ...

  5. \r \r\n \t 的区别

    http://www.360doc.com/content/12/0530/15/16538_214756101.shtml \n 软回车:       在Windows 中表示换行且回到下一行的最开 ...

  6. 设计模式C++学习笔记之十二(Command命令模式)

      命令模式,将一个请求封装为一个对象,从而使你可用不同的请求对客户进行参数化:对请求排队或记录请求日志,以及支持可撤消的操作.应该是一个比较简单的模式了. 12.1.解释 main(),客户 CIn ...

  7. LiteIDE 在 Windows 下为 Go 语言添加智能提示代码补全

    本文以 Windows 7 64 位为环境,go1.4.2.windows-amd64 和 liteidex27.2.1.windows-qt5 为例. 成功搭建开发环境后,发现 LiteIDE 没有 ...

  8. [UE4]区分敌我

    第一方法是:使用Actor对象的Tag: 只要继承自Actor的对象,都会有Tags这个属性,这是一个数组,可以添加多个Tag. 在蓝图中可以使用“get Components by Tag”获得某个 ...

  9. python函数传入参数(默认参数、可变长度参数、关键字参数)

    1.python中默认缺省参数----定义默认参数要牢记一点:默认参数必须指向不变对象! 1 def foo(a,b=1): 2 print a,b 3 4 foo(2) #2 1 5 foo(3,1 ...

  10. N-N

    ---情景--- 关系:角色N-N区域 基础表:角色表.区域表 关系表:主键-角色id-区域id集 ---需求--- 实现“单个区域勾选角色”且不借助与非SQL脚本(php etc)遍历 ---疑惑- ...