$("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. Oracle错误——ORA-01691: Lob 段SFZXP.SYS_LOB0000030381C00004$$无法通过8192(在表空间USERS中)扩展

    问题 Oracle报错:ORA-01691: Lob 段SFZXP.SYS_LOB0000030381C00004$$无法通过8192(在表空间USERS中)扩展 问题原因 Oracle数据表空间不足 ...

  2. word如何替换行首?

    在替换窗口, 要使用通配符 要使用 替换中的 分组, 高级替换 表示行首的符号, 使用 (<*) 表示 单词开始的位置, 使用 <, 表示单词结束的位置, 使用 > 替换的示例:

  3. CodeForces 509C Sums of Digits(贪心乱搞)题解

    题意:a是严格递增数列,bi是ai每一位的和,告诉你b1~bn,问你怎样搞才能让an最小 思路:让ai刚好大于ai-1弄出来的an最小.所以直接模拟贪心,如果当前位和前一个数的当前位一样并且后面还能生 ...

  4. 题解——洛谷P3812【模板】线性基

    学了下线性基 使用好像并不复杂 打了板子 但是要注意位运算优先级 #include <cstdio> #include <algorithm> #include <cst ...

  5. Kylin工作原理、体系架构

    核心思想:预计算. 对多维分析可能用到的度量进行预计算,将计算好的结果保存成Cube,并存在HBase中,供查询时直接访问 将高复杂度的聚合运算.多表连接……操作转换成对预计算结果的查询.决定了Kyl ...

  6. 【Cucumber】【命令行】

    知识点 参考:https://www.cnblogs.com/worklog/p/5253297.html cucumber的命令行选项 首先查看命令行选项.和其它命令行工具一样,cucumber提供 ...

  7. python 排序 由大到小

    import functools class Solution: # @param {integer[]} nums # @return {string} def largestNumber(self ...

  8. linux df

    显示磁盘使用情况 [hadoopuser@CNSZ443239 ~]$ df   文件系统                            1K-块           已用      可用 已 ...

  9. java添加templates模板,httpServlet模板改写

    为了提高开发效率,通常将一些常用模板添加到快捷键,方法: window-prefrerences-java-editor-templates 代码复制进去apply应用即可 package com.l ...

  10. 使用Qss设置QT程序界面的样式和皮肤

    1         使用Qss设置QT程序界面的样式和皮肤 1.1  Qss的功能 Qt程序界面中控件的背景图片.大小.字体颜色.字体类型.按钮状态变化等属性可以通过Qss文件来设置,美化UI界面.实 ...