浅谈移动端之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 相关文章推荐
禁止拷贝网页内容的js代码
Jan 22 Javascript
javascript 回到顶部效果的实现代码
Feb 17 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
Feb 19 Javascript
被遗忘的javascript的slice() 方法
Apr 20 Javascript
.NET微信公众号开发之创建自定义菜单
Jul 16 Javascript
简单谈谈javascript中的变量、作用域和内存问题
Aug 30 Javascript
详解js中构造流程图的核心技术JsPlumb
Dec 08 Javascript
js实现图片缓慢放大缩小效果
Aug 02 Javascript
前端主流框架vue学习笔记第一篇
Jul 26 Javascript
ajax与jsonp的区别及用法
Oct 16 Javascript
使用puppeteer爬取网站并抓出404无效链接
Dec 20 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
Nov 01 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
第九节--绑定
2006/11/16 PHP
如何用C语言编写PHP扩展的详解
2013/06/13 PHP
解析htaccess伪静态的规则
2013/06/18 PHP
PHP正则表达式 /i, /is, /s, /isU等介绍
2014/10/23 PHP
简单实用的全选反选按钮例子
2013/10/18 Javascript
Javascript中的五种数据类型详解
2014/12/26 Javascript
JS实现适合于后台使用的动画折叠菜单效果
2015/09/21 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
2015/10/01 Javascript
基于JavaScript实现仿京东图片轮播效果
2015/11/06 Javascript
javascript性能优化之DOM交互操作实例分析
2015/12/12 Javascript
详解javascript中对数据格式化的思考
2017/01/23 Javascript
基于BootStrap实现简洁注册界面
2017/07/20 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
2018/01/05 Javascript
vue实现的网易云音乐在线播放和下载功能案例
2019/02/18 Javascript
vue 开发企业微信整合案例分析
2019/12/02 Javascript
jquery实现弹窗(系统提示框)效果
2019/12/10 jQuery
python中对list去重的多种方法
2014/09/18 Python
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
Python中json格式数据的编码与解码方法详解
2016/07/01 Python
Python递归实现汉诺塔算法示例
2018/03/19 Python
django DRF图片路径问题的解决方法
2018/09/10 Python
OpenCV图像颜色反转算法详解
2019/05/13 Python
详解Anconda环境下载python包的教程(图形界面+命令行+pycharm安装)
2019/11/11 Python
用python求一重积分和二重积分的例子
2019/12/06 Python
Django对接支付宝实现支付宝充值金币功能示例
2019/12/17 Python
Python join()函数原理及使用方法
2020/11/14 Python
HTML5如何使用SVG的方法示例
2019/01/11 HTML / CSS
美国著名的女性内衣零售商:Frederick’s of Hollywood
2018/02/24 全球购物
UNIX命令速查表
2012/03/10 面试题
一个J2EE项目团队的主要人员组成是什么
2012/06/04 面试题
优秀食品类广告词
2014/03/19 职场文书
食品安全宣传标语
2014/06/07 职场文书
公司股东合作协议书
2014/09/14 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/10/28 职场文书
2015年三万活动总结
2015/03/25 职场文书
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android