$("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. Eclipse的Servers视图中无法添加Tomcat

    问题:Eclipse的Servers视图中无法添加Tomcat,其中ServerName是被置为灰色的,无法编辑,如下图所示: 解决步骤: 关闭Eclipse 找到Eclipse的工作区间,这里假设命 ...

  2. 嵌入式电路中的BUCK VS LDO【转】

    本文转载自:http://blog.chinaunix.net/uid-25906157-id-4125916.html 作为一名FAE,才知硬件知识的匮乏.慢慢积累一点儿硬件知识吧!BUCK和LDO ...

  3. 通过SIMPLE_DEV_PM_OPS定义suspend和resume函数【转】

    本文转载自:https://blog.csdn.net/tiantao2012/article/details/77851782 通过SIMPLE_DEV_PM_OPS 定义这个驱动的suspend和 ...

  4. Cmder + Babun 打造 Windows 好用的终端工具

    Babun a windows shell you will love Babun features the following: Pre-configured Cygwin with a lot o ...

  5. tp框架中的一些疑点知识-2

    tp中有三种常量: 预定义常量, 这个设置后不会随环境的改变而改变的,比如'URL_MODEL' => 1 注意是 model, 不是 url_mode 路径常量, 也不会随环境的改变而改变的, ...

  6. expr的字符串操作 表达式: length, index, match, substr等

    参考: http://www.linuxidc.com/Linux/2012-04/58095.htm expr的格式, 主要有两个, 一是 用expr option, 选项: 二是, expr的几个 ...

  7. BZOJ5479: tree

    Description 给出一棵树,根节点为1 给出两个集合,集合由树上节点组成 从两个集合分别选出一个元素,求其LCA 问LCA的最大深度是多少 Input 第一行给出数据组数T 对于每组数据 第一 ...

  8. 深度学习课程笔记(七):模仿学习(imitation learning)

    深度学习课程笔记(七):模仿学习(imitation learning) 2017.12.10 本文所涉及到的 模仿学习,则是从给定的展示中进行学习.机器在这个过程中,也和环境进行交互,但是,并没有显 ...

  9. Nuget EPPlus的使用

    EPPlus:网站 Supported Functions Excel Merge Operate public class ExcelMergeOperate { private static Lo ...

  10. Linux命令去重统计排序

    利用Linux命令进行文本按行去重并按重复次数排序   linux命令行提供了非常强大的文本处理功能,组合利用linux命令能实现好多强大的功能.本文这里举例说明如何利用Linux命令行进行文本按行去 ...