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 ...
随机推荐
- CentOS下redis集群安装
环境: 一台CentOS虚拟机上部署六个节点,创建3个master,3个slave节点 1.下载并解压 cd /root wget http://download.redis.io/releases/ ...
- React Native学习——动画Animated（笔记）
很多地方都需要用到动画,先看下文档吧. 一.两个互补的动画系统 LayoutAnimation:用于全局的布局动画 Animated:用于创建更精细的交互控制的动画(主要是这个) 二.Animated ...
- SVN如何commit(提交)项目代码
在本地代码做出变更之后,我们就需要通过svn commit命令提交到远程服务端 工具/原料 SVN客户端 方法/步骤 选中需要更新的代码文件夹或目录,点击右键,选择"Tortoise ...
- 用echartsjs 实现动态绘制折线、柱状等图形，并实现多图联动效果
echarts对于大数据处理后绘制折线图,柱形图等等的效果和速度都很好.下面我们介绍 怎么把封装的数据列表解析出来,动态绘图,并且实现鼠标联动效果引入js文件: <script type=&qu ...
- Material04 MdListModule模块
1 在共享模块中导入MdListModule模块 import { NgModule } from '@angular/core'; import { CommonModule } from '@an ...
- 向MapReduce转换：生成用户向量
分两部分: <span style="font-size:18px;">/*** * @author YangXin * @date 2016/2/21 * @ inf ...
- 自学Zabbix3.7-事件Event
配置item.trigger.都是为发送报警做准备的,什么是事件通知呢?简单的说故障发生了,zabbix会发邮件或者短信给你,告诉你服务器的一些状况. 1. 通知条件 发送通知,需要有如下步骤 定义一 ...
- css自动添加浏览器兼容前缀 autoprefixer设置
Autoprefixer设置: preferences>key Bindings-Users {"keys":["ctrl+alt+x"],"c ...
- Chef 自动化运维：初探 cookbook
cookbook 概述 Chef 意为"厨房",我们要做"菜",自然需要有"菜谱".事实上在 Chef 中分发到各服务器节点的不是" ...
- Struts的使用
一.Struts2的获取 Struts的官方网站为:http://struts.apache.org/ 下载完Struts2的jar包,解压,Struts2资源包的目录结构如下图: apps目录下包含 ...