$("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");
    }
  });

js判断触摸方向的更多相关文章

  1. 移动端JS判断手势方向

    原生JS判断手势方向的解决思路: 1.滑动屏幕事件使用html5 的touchstart滑动开始事件和touchend滑动结束事件. 2.方向的判断,以起点做平面坐标系,与终点连线做直线,直线与x正半 ...

  2. 移动应用滑动屏幕方向判断解决方案,JS判断手势方向

    问题分类 滑动屏幕打开相应功能操作. 问题描述 1.用户手动滑动屏幕,根据滑动的方向,打开相应的功能(如:向上滑摇钱树经验明细,向下滑打开任务明细,向左滑打开聚宝盆物品查看等功能),滑动事件捕获问题. ...

  3. js判断滚动方向

     //页面滚动监听事件     window.onscroll = function (e) {                scrollFunc();         $("#t&quo ...

  4. Unity3D判断触摸方向

    据说 Temple Run(神庙逃亡) 就是用这种方式操作的 废话不多说 直接上代码 using UnityEngine; using System.Collections; public class ...

  5. 通过JS判断联网类型和连接状态

    通过JS判断联网类型和连接状态 中国的移动网络环境复杂,为了给用户带去更好访问体验,开发者希望能了解用户当前的联网方式,然后给用户一个符合当前网络环境的请求结果. W3C的规范中给出了一个方法来获得现 ...

  6. js判断手机的横竖屏调整样式

    在移动端,我们经常遇到横竖屏的问题,所以我们改如何判断或针对横竖屏来写代码呢.首先需要在head中加入如下代码: <meta name="viewport" content= ...

  7. JS 判断移动端与PC端

    js判断移动端与pc端   这里介绍下使用device.js插件来判断移动端设备 地址:https://github.com/matthewhudson/device.js 示例: 1 2 3 4 5 ...

  8. js判断本机是否已安装app

    需求:在浏览器或者app webview中打开的页面,js判断本机是否已安装搜狐新闻客户端. 一.微信 1.分享——好友/朋友圈,feed会有搜狐新闻标记,打开url后缀参数isappinstalle ...

  9. js判断网页是否加载完毕 包括图片

    <script type="text/javascript" language="JavaScript"> //: 判断网页是否加载完成 docum ...

随机推荐

  1. SQLServer备份恢复助手(太强大了!)

    下载地址: http://download.csdn.net/detail/gguozhenqian/8105779

  2. 洛谷P3356 火星探险问题(费用流)

    传送门 和深海机器人问题差不多……看到有的大佬是用dp过的,强无敌…… 考虑一下,把每一个点拆点,分别是$A_i$和$B_i$,连一条容量为$inf$,费用为$0$的边,表示可以随便走.如果有石头,再 ...

  3. 洛谷P2762 太空飞行计划问题(最小割)

    传送门 我们可以把实验放在左边,仪器放在右边,点有点权,然后连对应的有向边,就是求一个最大权闭合图,可以转化为最小割来做(关于这具体是个啥……可以百度胡伯涛<最小割模型在信息学竞赛中的应用> ...

  4. 【FAQ】Unable to start EmbeddedWebApplicationContext due to missing EmbeddedServlet

    原因: <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spr ...

  5. 【Thread】线程工厂-ThreadFactory

    ThreadFactory---线程工厂 在apollo源码中有这么一段代码 ExecutorService m_longPollingService = Executors.newSingleThr ...

  6. maven项目运行找不到类的错误

    Maven项目 eclipse工具 错误: [INFO] -------------------------------------------------------------[ERROR] CO ...

  7. python中xml解析

    import xml.dom.minidom input_xml_string = '''<root><a>hello</a></root>'''#打开 ...

  8. http2.2使用ajp与tomcat集成

    环境 1.CENTOS 6.5 2.yun安装的httpd,版本是2.2 3.tomcat版本8.5.28 操作 关闭8080端口连接,打开8009端口修改tomcat_home/conf/serve ...

  9. Win7 如何阻止程序联网

    https://jingyan.baidu.com/article/9113f81b03d4e12b3214c7c3.html

  10. LeetCode记录之13——Roman to Integer

    能力有限,这道题采用的就是暴力方法,也只超过了39%的用户.需要注意的就是罗马数字如果IXC的后一位比前一位大的采取的是减的方式. Given a roman numeral, convert it ...