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 ...
随机推荐
- Python测试开发之random模块
random模块是一个生成随机数.随机字符的模块,平时被使用的也非常多,下面是random模块的常用方法: random.random()生成一个0-1的随机小数,如果想要对随机小数保留两位小数,可以 ...
- Linux常用基础命令
一.系统目录结构 约定俗成: bin (binaries)存放二进制可执行文件 sbin (super user binaries)存放二进制可执行文件,只有root才能访问 etc (e ...
- Postgres是如何管理空值的
创建表test,y字段插入null. test=# create table test(x bigint,y bigint,z text); CREATE TABLE test=# insert in ...
- Android ViewPager实现图片标题轮播和点击事件
我看别人的文章,最喜欢看有图的.然后先找图看. 那我就先上效果图: 实现了图片自动轮播,手动滑动,轮播标题,以及点击事件.下面开始: 一.资源文件: 首先是布局: <?xml version=& ...
- Linux上跑两个版本的php,5.4.45和5.3.24
首先,装的实在艰难,所以容我吐槽两句: PHP好个P,两个小版本都不兼容,把这个php5.3.24放在5.4.45环境下都跑不了.对于我这种用多了向下兼容的java的人来说,简直无法想象! 网上有装俩 ...
- Python&MySQL&PyQt
环境: Python2.7+MySQL5.6+PyQt4 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/40 ...
- CentOS安装java and javac(java执行环境和开发环境)
[root@localhost usr]# yum install java Loaded plugins: fastestmirror, refresh-packagekit, security R ...
- 【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记38 Unwind Segue反向过渡
之前我们接触过了segue,这是IOS中最主要的传递方式,今天来解说一下怎样进行反向的segue. 反向过渡的使用前提是发出过渡的MVC必须是由目标MVC直接或者间接正向过渡来的.反向过渡是唯一不会创 ...
- pthread线程属性介绍
线程属性 创建线程函数 int pthread_create (pthread_t* restrictthread, const pthread_attr_t* restrictattr,void* ...
- JavaScript实现八大内部排序算法
注:基数排序中:r是关键字的基数,d是长度,n是关键字的个数 1.插入排序 基本思想:在序号i之前的元素(0到i-1)已经排好序,本趟需要找到i对应的元素x (此时即arr[i]) 的正确位置k,在寻 ...