浅谈移动端之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 相关文章推荐
监控 url fragment变化的js代码
Apr 19 Javascript
jQuery中将函数赋值给变量的调用方法
Mar 23 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
Aug 01 Javascript
javascript正则表达式总结
Feb 29 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
Jun 15 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
xmlplus组件设计系列之树(Tree)(9)
May 02 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
May 12 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
Nov 13 Javascript
Vue2.x通用编辑组件的封装及应用详解
May 28 Javascript
vue中使用[provide/inject]实现页面reload的方法
Sep 30 Javascript
react中hook介绍以及使用教程
Dec 11 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
基于mysql的bbs设计(三)
2006/10/09 PHP
php下实现折线图效果的代码
2007/04/28 PHP
javascript 跳转代码集合
2009/12/03 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
2013/06/19 Javascript
js使用DOM操作实现简单留言板的方法
2015/04/10 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
2015/05/14 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
了不起的11个JavaScript代码重构最佳实践小结
2021/01/11 Javascript
python采用getopt解析命令行输入参数实例
2014/09/30 Python
python中实现迭代器(iterator)的方法示例
2017/01/19 Python
python设置值及NaN值处理方法
2018/07/03 Python
Flask框架WTForm表单用法示例
2018/07/20 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
Python3标准库总结
2019/02/19 Python
Python异步操作MySQL示例【使用aiomysql】
2019/05/16 Python
python3.7.3版本和django2.2.3版本是否可以兼容
2020/09/01 Python
CSS3 选择器 属性选择器介绍
2012/01/21 HTML / CSS
基于CSS3实现的黑色个性导航菜单效果
2015/09/14 HTML / CSS
美国高街时尚品牌:OASAP
2016/07/24 全球购物
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
什么是设计模式
2012/06/17 面试题
编辑求职信样本
2013/12/16 职场文书
婚礼新郎父母答谢词
2014/01/16 职场文书
《千年梦圆在今朝》教学反思
2014/02/24 职场文书
文明城市标语
2014/06/16 职场文书
运动员获奖感言
2014/08/15 职场文书
新闻人物通讯稿
2014/10/09 职场文书
公安个人四风问题对照检查及整改措施
2014/10/28 职场文书
2014年实习班主任工作总结
2014/11/08 职场文书
出纳岗位职责
2015/01/31 职场文书
公司表扬信格式
2015/05/04 职场文书
2015年乡镇卫生院妇幼保健工作总结
2015/05/19 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书
建立共青团委员会的请示
2019/04/02 职场文书
导游词之塘栖古镇
2019/12/04 职场文书
Kubernetes部署实例并配置Deployment、网络映射、副本集
2022/04/01 Servers