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) ...
随机推荐
- myeclise中创建maven web程序
myeclipse自带了许多插件,因此使用频率很高,但是对maven框架下web程序似乎不是很好的支持,每次创建web程序总是会报一大堆的异常,因此特此记录一下如何在myeclipse下创建一个web ...
- P3979 遥远的国度
P3979 遥远的国度 思路 一开始我用这个函数得到左端点 int get_l(int x,int y) { if(top[x]==top[y]) return son[x]; int last=to ...
- RHEL7和RHEL6即时设置、开启和开机、永久开启服务的方法、原理(例子:端口与Nginx冲突的Apache httpd服务的关闭)
1.RHEL7 说明:启用服务就是在当前 runlevel 的配置文件目录/etc/systemd/system/multi-user.target.wants/里,建立/usr/lib/system ...
- What is event bubbling and capturing?
What is event bubbling and capturing? 答案1 Event bubbling and capturing are two ways of event propaga ...
- 3. Elements of a Test Plan
https://jmeter.apache.org/usermanual/test_plan.html This section describes the different parts of a ...
- computed 计算选项
computed 的作用主要是对原数据进行改造输出.改造输出:包括格式的编辑,大小写转换,顺序重排,添加符号……. 格式化输出结果 我们先来做个读出价格的例子:我们读书的原始数据是price:100 ...
- (转载)C#:Enum、Int和String的互相转换,枚举转换
Enum为枚举提供基类,其基础类型可以是除 Char 外的任何整型.如果没有显式声明基础类型,则使用 Int32.编程语言通常提供语法来声明由一组已命名的常数和它们的值组成的枚举.注意:枚举类型的基类 ...
- 洛谷P2362 围栏木桩----dp思路
在翻dp水题的时候找到的有趣的题0v0 原文>>https://www.luogu.org/problem/show?pid=2362<< 题目描述 某农场有一个由按编号排列的 ...
- Tomcat服务器环境变量配置及在Eclipse中启动和配置
本文原创,转载需注明出处: 如何配置在Eclipse中配置Tomcat服务器 1.在配置的时候要右击‘我的电脑‘看是否安装了jdk,配置了jdk的环境变量,看是否有classpath和path是否指向 ...
- jd面试之感
一面问题:问题都回答的很好,顺利进入二面 1.单点登录的改造和原理 2.hashmap 3.jvm:堆.方法区.栈,本地方法栈,gc,gc的方式 4.spring的ioc.aop的实现方式cglib和 ...