$("body").on("touchstart", function(e) {
// 判断默认行为是否可以被禁用
if (e.cancelable) {
// 判断默认行为是否已经被禁用
if (!e.defaultPrevented) {
e.preventDefault();
}
}
startX = e.originalEvent.changedTouches[0].pageX,
startY = e.originalEvent.changedTouches[0].pageY;
});
$("body").on("touchend", function(e) {
// 判断默认行为是否可以被禁用
if (e.cancelable) {
// 判断默认行为是否已经被禁用
if (!e.defaultPrevented) {
e.preventDefault();
}
}
moveEndX = e.originalEvent.changedTouches[0].pageX,
moveEndY = e.originalEvent.changedTouches[0].pageY,
X = moveEndX - startX,
Y = moveEndY - startY;
//左滑
if ( X > 0 ) {
alert('左滑');
}
//右滑
else if ( X < 0 ) {
alert('右滑');
}
//下滑
else if ( Y > 0) {
alert('下滑');
}
//上滑
else if ( Y < 0 ) {
alert('上滑');
}
//单击
else{
alert('单击');
}
});

转载http://blog.csdn.net/sinat_19327991/article/details/73823767

jQuery -- touch事件之滑动判断(左右上下方向)的更多相关文章

  1. 移动端笔记——jQuery touch事件

    判断移动端还是pc端 function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = new Array("A ...

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

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

  3. html5 touch事件实现触屏页面上下滑动(二)

    五一小长假哪都没去,睡了三天,今天晕晕沉沉的投入工作了,但还是做出了一点点效果 上周用html5的touch事件把简单的滑动做出来了,实现了持续页面上下滑动的效果,参考之前 的文章及代码html5 t ...

  4. 前端touch事件方向的判断

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

  5. jquery mobile Touch事件

    Touch事件在用户触摸屏幕(页面)时触发 1.jquery mobile tap tap事件在用户敲击某个元素时触发 $("p").on("tap",fucn ...

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

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

  7. html5 touch事件实现触屏页面上下滑动(一)

    最近做的做那个app的项目由于用overflow:hidden导致了很多问题,于是决定研究下html5的touch事件.想找个全面点的帖子真是难死了,虽然好多关于html5 touch的文章但大多都是 ...

  8. Android中Touch事件分析--解决HorizontalScrollView滑动和按钮事件触发问题

    之前写过关于HorizontalScrollView滑动和按钮事件触发问题,但是不能所有的情况,最近几天一直在想这个问题,今天有一个比较好的解决思路,最终应用在项目里面效果也很好,首先说明一下功能: ...

  9. js Touch事件(向左滑动,后退)

    js Touch事件(向左滑动,后退) 代码如下 var touch_p = { c_x : 0, c_y : 0, hasbacked : false }; function touches(ev) ...

随机推荐

  1. Selenium 15: How to Run Parallel Tests Using Selenium Grid and JUnit

    In this post, I will give two techniques and describe how to run your selenium tests in parallel by ...

  2. CSS的再深入(更新中···)

    在上一章我们提到了一个新的概念,叫做块级样式,讲到这里就要科普一下: 标签又分为两种: (1)块级标签 元素特征:会独占一行,无论内容多少,可以设置宽高··· (2)内敛标签(又叫做行内标签) 元素特 ...

  3. Restful framework【第二篇】APIView

    安装djangorestframework 方式一:pip3 install djangorestframework 方式二:pycharm图形化界面安装 方式三:pycharm命令行下安装(装在当前 ...

  4. 二次剩余&&Cipolla

    目录 二次剩余 勒让德符号(legendre symbol) Cipolla's Algorithm. 代码 end 二次剩余 给定y和奇质数p,求x,使得\(x^2≡y(mod p)\) 勒让德符号 ...

  5. POJ 1904 King's Quest(强连通图)题解

    题意:n个王子有自己喜欢的ki个公主,有n个公主,每个王子只能娶一个自己喜欢的公主且不能绿别的王子.现在给你一种王子娶公主的方案,并且保证这种方案是正确的.请你给出,每个王子能娶哪些公主,要求娶这些公 ...

  6. 剥开比原看代码13:比原是如何通过/list-balances显示帐户余额的?

    作者:freewind 比原项目仓库: Github地址:https://github.com/Bytom/bytom Gitee地址:https://gitee.com/BytomBlockchai ...

  7. python反爬虫解决方法——模拟浏览器上网

    之前第一次练习爬虫的时候看网上的代码有些会设置headers,然后后面的东西我又看不懂,今天终于知道了原来这东西是用来模拟浏览器上网用的,因为有些网站会设置反爬虫机制,所以如果要获取内容的话,需要使用 ...

  8. 在GeoServer里设置图层的默认自定义样式,出现不显示预览图的情况(不起作用)

    在GeoServer里设置图层的默认自定义样式 点击"Layers-->world:country"图层,点击"Publishing"标签,在下面的&qu ...

  9. python-ConfigParser模块【读写配置文件】

    对python 读写配置文件的具体方案的介绍 1,函数介绍 import configParser 如果Configparser无效将导入的configParser 的C小写 1.1.读取配置文件 - ...

  10. Mybatis拦截器(一)

    拦截器需要实现 interceptor接口 public interface Interceptor { //3 对目标对象拦截进行处理的内容 Object intercept(Invocation ...