jQuery -- touch事件之滑动判断(左右上下方向)
$("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事件之滑动判断(左右上下方向)的更多相关文章
- 移动端笔记——jQuery touch事件
判断移动端还是pc端 function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = new Array("A ...
- H5案例分享:移动端touch事件判断滑屏手势的方向
移动端touch事件判断滑屏手势的方向 方法一 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标 ...
- html5 touch事件实现触屏页面上下滑动(二)
五一小长假哪都没去,睡了三天,今天晕晕沉沉的投入工作了,但还是做出了一点点效果 上周用html5的touch事件把简单的滑动做出来了,实现了持续页面上下滑动的效果,参考之前 的文章及代码html5 t ...
- 前端touch事件方向的判断
移动端touch事件判断滑屏手势的方向 方法一 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标 ...
- jquery mobile Touch事件
Touch事件在用户触摸屏幕(页面)时触发 1.jquery mobile tap tap事件在用户敲击某个元素时触发 $("p").on("tap",fucn ...
- 实现移动端touch事件的横向滑动列表效果
要实现手机端横向滑动效果并不难,了解实现的原理及业务逻辑就很容易实现.原理:touchstart(手指按下瞬间获取相对于页面的位置)——>touchmove(手指移动多少,元素相应移动多少). ...
- html5 touch事件实现触屏页面上下滑动(一)
最近做的做那个app的项目由于用overflow:hidden导致了很多问题,于是决定研究下html5的touch事件.想找个全面点的帖子真是难死了,虽然好多关于html5 touch的文章但大多都是 ...
- Android中Touch事件分析--解决HorizontalScrollView滑动和按钮事件触发问题
之前写过关于HorizontalScrollView滑动和按钮事件触发问题,但是不能所有的情况,最近几天一直在想这个问题,今天有一个比较好的解决思路,最终应用在项目里面效果也很好,首先说明一下功能: ...
- js Touch事件(向左滑动,后退)
js Touch事件(向左滑动,后退) 代码如下 var touch_p = { c_x : 0, c_y : 0, hasbacked : false }; function touches(ev) ...
随机推荐
- Maven的安装与本地仓库的搭建
Maven的安装 1.首先去官网下载maven.http://maven.apache.org/download.cgi 2.解压下载后的压缩包.例如到D盘.D:\apache-maven-3.5.0 ...
- Python3基础 dict clear 清空一个字典
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- tp框架中的一些疑点知识-5
关于vim中的缓存区的前后bp和bn的界定 通过命令ls可以看到 缓存区的 排序. 最开始打开的文件排在最上面, 序号最小. 那么它们就是 更 前 的缓冲区. 序号更前的用bp, 序号靠后的用bn. ...
- dll注入到指定进程
talk is cheap,show me code 代码有详细注释 主程序 #include "stdafx.h" #include <windows.h> #inc ...
- Python入门 值内存管理与所有的关键字
值内存管理 Python采用的是基于值得内存管理方式,如果为不同变量赋值为相同值,这个值在内存中只有一份,多个变量指向同一块内存地址. id(x) : 用于返回变量所指值的内存地址 x = 3 pri ...
- P3975 [TJOI2015]弦论
思路 一眼SAM板子,结果敲了一中午... 我还是太弱了 题目要求求第k小的子串 我们可以把t=0当成t=1的特殊情况,(所有不同位置的相同子串算作一个就是相当于把所有子串的出现位置个数(endpos ...
- BZOJ 4159 [Neerc2009]Business Center
思路 简单的模拟,答案就是\(min\{(\lfloor\frac{d\times n}{u+d}\rfloor+1)\times(u+d)-d\times n\}\) 代码 #include < ...
- NIO小纪
我们通常说的NIO大多数场景下都是基于I/O复用技术的NIO,比如jdk中的NIO,当然Tomcat8以后的NIO也是指的基于I/O复用的NIO.注意,使用NIO != 高性能,当连接数<100 ...
- Kibana——日志可视化工具
Kibana 基础入门 kibana产品介绍 Kibana :是一个开源的分析和可视化平台,旨在与 Elasticsearch 合作.Kibana 提供搜索.查看和与存储在 Elasticsearch ...
- PTA 根据后序和中序遍历输出先序遍历(25 分)
7-1 根据后序和中序遍历输出先序遍历(25 分) 本题要求根据给定的一棵二叉树的后序遍历和中序遍历结果,输出该树的先序遍历结果. 输入格式: 第一行给出正整数N(≤30),是树中结点的个数.随后两行 ...