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函数进阶系列第三篇——函数节流和函数防抖
前面的话 javascript中的函数大多数情况下都是由用户主动调用触发的,除非是函数本身的实现不合理,否则一般不会遇到跟性能相关的问题.但在一些少数情况下,函数的触发不是由用户直接控制的.在这些场景 ...
- QT之UDP通信
前言:前一篇讲了TCP通信,这篇来看看UDP通信. 这里说明一下,UDP通信中分为三种通信分别为单播.组播和广播,下面将一一为大家介绍. 同样的我们都需要在工程文件中添加network QT += c ...
- “IAsyncOperation<StorageFile>”不包含“GetAwaiter”的定义
错误 CS4036 "IAsyncOperation<StorageFile>"不包含"GetAwaiter"的定义,并且找不到可接受类型为&quo ...
- iBeacon硬件厂商和产品
最近项目比较忙,也没有时间写Blog. 这几天因为项目需要采购为数不小的iBeacon,所以花了点时间对市面上主要的iBeacon简单的调研总结了一下. 分享给需要买相关设备进行试验的小伙伴,数据不权 ...
- 【JSOI2008】最大数
https://www.luogu.org/problem/show?pid=1198 之前刚学完Splay想找题练手的时候做的,写完Splay交上去了才发现这应该是线段树裸题23333 Splay解 ...
- android应用集成google登录
集成google登录之前需要有一下三点要求,只有具备一下两点要求才能集成google登录: 1,android 运行版本4.0及更新版本 2,android 设 ...
- Ali RocketMQ与Kafka对照
淘宝内部的交易系统使用了淘宝自主研发的Notify消息中间件,使用Mysql作为消息存储媒介.可全然水平扩容,为了进一步减少成本.我们觉得存储部分能够进一步优化,2011年初,Linkin开源了Kaf ...
- 使用storyboard设置button边框属性（颜色，宽度，圆角）
通常使用Category时.仅仅能加入方法,不可加入属性.可是在使用Storyboard时我们可能会使用到keyPath,这里设置的key都须要是所设置视图的属性值.而且类型有所限制. 比如:我如今有 ...
- day01_使用Android Studio创建第一个Android项目
使用Android Studio开发Android项目如此简单 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize ...
- laravel会话驱动扩展—连接自定义会话管理系统
laravel 版本:5.3.* 用laravel开发公司信息系统过程中,由于业务或安全问题的考虑,会有一些特殊的用户会话管理方面的需求,如多个子系统会话统一管理或A系统业务操作导致B系统中某些在线用 ...