touch监听判断手指的上滑，下滑，左滑，右滑，事件监听
判断滑动的方向和距离，来实现一定的效果，比如返回上一页等等
<body>
<script>
$(function(){
//给body强制定义高度
var windowHeight = $(window).height(),
$body = $("body");
// console.log($(window).height()); //627
// console.log($('body').height()); //0
$body.css("height", windowHeight); //重要代码
$("body").on("touchstart", function(e) {
//e.preventDefault();//会使所有的触屏都失效，不能用
startX = e.originalEvent.changedTouches[0].pageX,
startY = e.originalEvent.changedTouches[0].pageY;
});
$("body").on("touchmove", function(e) {
//e.preventDefault();
moveEndX = e.originalEvent.changedTouches[0].pageX,
moveEndY = e.originalEvent.changedTouches[0].pageY,
X = moveEndX - startX,
Y = moveEndY - startY;
if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {
alert("right");
}
else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {
alert("left");
}
else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {
alert("bottom");
}
else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {
alert("top");
}
else{
alert("just touch");
}
});
})
</script>
touch监听判断手指的上滑，下滑，左滑，右滑，事件监听的更多相关文章
- js判断手指的上滑，下滑，左滑，右滑，事件监听
原理:1:当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和staerY: 2:当触发touchmove事件的时候,再获取此时手指的横坐标moveEndX和纵坐标moveEn ...
- Spring 事件监听机制及原理分析
简介 在JAVA体系中,有支持实现事件监听机制,在Spring 中也专门提供了一套事件机制的接口,方便我们实现.比如我们可以实现当用户注册后,给他发送一封邮件告诉他注册成功的一些信息,比如用户订阅的主 ...
- 从jQuery的缓存到事件监听
不知道大家有没有发现,用jQuery选择器"选择"之后的DOM上会添加jQuery*********属性. <DIV id=d1 jQuery1294122065250=&q ...
- js事件监听机制(事件捕获)总结
在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...
- Java swing（awt）：事件监听机制的实现原理+简单示例
(1)实现原理 事件监听机制的实现: 参考图:事件模型_ActionEvent 为了节省资源,系统无法对某个事件进行实时的监听.故实现的机制是当发生某个事件后,处理代码将被自动运行,类似钩子一般.(回 ...
- js事件监听机制(事件捕获)
在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...
- React.js 小书 Lesson9 - 事件监听
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson9 转载请注明出处,保留原文链接和作者信息. 在 React.js 里面监听事件是很容易的事情 ...
- SpringBoot框架(6)--事件监听
一.场景:类与类之间的消息通信,例如创建一个对象前后做拦截,日志等等相应的事件处理. 二.事件监听步骤 (1)自定义事件继承ApplicationEvent抽象类 (2)自定义事件监听器,一般实现Ap ...
- WebView使用详解（二）——WebViewClient与常用事件监听
登录|注册 关闭 启舰 当乌龟有了梦想…… 目录视图 摘要视图 订阅 异步赠书:Kotlin领衔10本好书 免费直播:AI时代,机器学习如何入门? 程序员8 ...
随机推荐
- JavaScript各种继承方式和优缺点
好久没写博客啦,嘻嘻,这个月是2017年的最后一个月啦,大家应该都开始忙着写年终总结了吧,嘻嘻,小颖今天给大家分享下Javascript中的几种继承方式以及他们的优缺点. 1.借助构造函数实现继承 原 ...
- I/O复用中的 select poll 和 epoll
I/O复用中的 select poll 和 epoll: 这里有一些不错的资料: I/O多路复用技术之select模型: http://blog.csdn.net/nk_test/article/de ...
- nginx启动脚本，手动编辑
nginx启动脚本,手动编辑 #! /bin/bash # chkconfig: - # description: nginx service XDIR=/www/server/nginx DESC= ...
- QQ空间掉帧率优化实战
商业转载请联系腾讯WeTest获得授权,非商业转载请注明出处. WeTest 导读 空间新业务需求日益增多,在业务开发阶段的疏忽,或者是受到其他业务的影响(比如一些非空间的业务网络回包或者逻辑在主线程 ...
- 自己动手实现mvc框架
用过springmvc的可能都知道,要集成springmvc需要在web.xml中加入一个跟随web容器启动的DispatcherServlet,然后由该servlet初始化一些东西,然后所有的web ...
- UWP 共享文件——发送者
这一节,顾名思义,即使你要共享数据给别人,你是数据的提供者.分两步即可1.直接复制代码 protected override void OnNavigatedTo(NavigationEventArg ...
- (转)Python 日期和时间
转自http://www.runoob.com/python/python-date-time.html Python 日期和时间 Python 程序能用很多方式处理日期和时间,转换日期格式是一个常见 ...
- 分布式监控系统Zabbix3.2对数据库的连接数预警
在前篇分布式监控系统Zabbix3.2监控数据库的连接数 中已经对数据库的端口3306进行了监控,可以看到数据库的连接数历史变化有高有低,那如果达到了数据库连接数的阀值是不是主动通知给运维人员去检查问 ...
- java 接口测试，使用excel做数据驱动（二）
承接上篇. 改变我们的测试驱动方式,灵活设置测试用例. 数据驱动测试 数据驱动测试的核心是: 测试数据与测试脚本分离,实现测试脚本参数化, 提高测试脚本的可重用性.在自动化功能测试中如果灵活使用数据源 ...
- myBatis数据库常用标签
<sql id=""></sql>:封装sql语句,被其他sql调用 <include refid=""></incl ...