浅谈移动端之js touch事件 手势滑动事件


Posted in Javascript onNovember 07, 2016

现分享一篇关于touch的文章,望指教!

原理:

当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY;
当触发touchmove事件时,在获取此时手指的横坐标moveEndX和纵坐标moveEndY;最后,通过这两次获取的坐标差值来判断手指在手机屏幕上的滑动方向。
具体代码如下:

$("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 ( X > 0 ) {
  alert("left 2 right");
 }
 else if ( X < 0 ) {
  alert("right 2 left");
 }
 else if ( Y > 0) {
  alert("top 2 bottom");
 }
 else if ( Y < 0 ) {
  alert("bottom 2 top");
 }
 else{
  alert("just touch");
 }
});

总结:touchmove的最后坐标减去touchstart的起始坐标。

X的结果如果正数,则说明手指是从左往右划动;
X的结果如果负数,则说明手指是从右往左划动;
Y的结果如果正数,则说明手指是从上往下划动;
Y的结果如果负数,则说明手指是从下往上划动。
坑开始了……
理想很丰满,显示很骨感!在实际的操作中,手指的上下滑动很难做到直上直下,只要稍微有点斜,只要稍微有点斜,就会被X轴的判断先行接管,而与我们实际的操作意愿相背离。此时就需要添加特殊的判断技巧,代码如下:

$("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("left 2 right");
 }
 else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {
  alert("right 2 left");
 }
 else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {
  alert("top 2 bottom");
 }
 else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {
  alert("bottom 2 top");
 }
 else{
  alert("just touch");
 }
});

以上代码,在测试时仍不能达到预期的效果,此时要注意到一个事实--$('body').height = 0(此处是个大坑,但有时也不会出现,望大神指教)
故还应该在此基础上添加一下代码:

var windowHeight = $(window).height(),
   $body = $("body");
  // console.log($(window).height());
  // console.log($('body').height());
  $body.css("height", windowHeight);

 到此,已实现了手机移动端手指的上滑、下滑、左滑和右滑操作。

一些浅显的理解,望大神指教鞭策!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
简洁短小的 JavaScript IE 浏览器判定代码
Mar 21 Javascript
nullJavascript中创建对象的五种方法实例
May 07 Javascript
javaScript如何生成xmlhttp
Dec 16 Javascript
解决jquery中美元符号命名冲突问题
Jan 08 Javascript
初步使用Node连接Mysql数据库
Mar 03 Javascript
基于jQuery日历插件制作日历
Mar 11 Javascript
浅谈react前后端同构渲染
Sep 20 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
Aug 07 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
Aug 22 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
Jul 13 Javascript
JavaScript面向对象中接口实现方法详解
Jul 24 Javascript
解决antd的Form组件setFieldsValue的警告问题
Oct 29 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
Nov 07 #Javascript
AngularJS实现Input格式化的方法
Nov 07 #Javascript
AngularJS自定义插件实现网站用户引导功能示例
Nov 07 #Javascript
webpack常用配置项配置文件介绍
Nov 07 #Javascript
jQuery Mobile和HTML5开发App推广注册页
Nov 07 #Javascript
学习JavaScript图片预加载模块
Nov 07 #Javascript
pc加载更多功能和移动端下拉刷新加载数据
Nov 07 #Javascript
You might like
水质对咖图啡风味的影响具体有哪些
2021/03/03 冲泡冲煮
PHP操作文件方法问答
2007/03/16 PHP
php引用计数器进行垃圾收集机制介绍
2012/09/19 PHP
php使用正则过滤js脚本代码实例
2014/05/10 PHP
浅析ThinkPHP中execute和query方法的区别
2014/06/13 PHP
php查询mssql出现乱码的解决方法
2014/12/29 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
使用JQuery和s3captche实现一个水果名字的验证
2009/08/14 Javascript
js中的string.format函数代码
2020/08/11 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
2013/04/02 Javascript
用jquery写的一个万年历(自写)
2014/01/20 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
使用jQuery制作基础的Web图片轮播效果
2016/04/22 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
2016/06/24 Javascript
微信小程序页面生命周期详解
2018/01/31 Javascript
Vue中CSS动画原理的实现
2019/02/13 Javascript
javascript随机变色实例代码
2019/10/15 Javascript
vue.js 实现a标签href里添加参数
2019/11/12 Javascript
jQuery实现轮播图效果demo
2020/01/11 jQuery
node+multer实现图片上传的示例代码
2020/02/18 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
vue动态合并单元格并添加小计合计功能示例
2020/11/26 Vue.js
介绍Python中几个常用的类方法
2015/04/08 Python
Django中的“惰性翻译”方法的相关使用
2015/07/27 Python
Python读取sqlite数据库文件的方法分析
2017/08/07 Python
Pytorch自己加载单通道图片用作数据集训练的实例
2020/01/18 Python
详解css3中的伪类before和after常见用法
2020/11/17 HTML / CSS
HTML5的download属性详细介绍和使用实例
2014/04/23 HTML / CSS
大学生专科毕业生自我评价
2013/11/17 职场文书
婚庆公司的创业计划书
2014/01/22 职场文书
元旦联欢会主持词
2014/03/26 职场文书
2014年敬老院工作总结
2014/12/08 职场文书
2015年党风廉政承诺书
2015/01/22 职场文书
学生逃课万能检讨书2000字
2015/02/17 职场文书
2016年“6.26”禁毒宣传月系列活动总结
2016/04/05 职场文书
Pyqt5将多个类组合在一个界面显示的完整示例
2021/09/04 Python