浅谈移动端之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 相关文章推荐
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
Jul 31 Javascript
jQuery随便控制任意div隐藏的方法
Jun 28 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
Jan 12 Javascript
js实现的光标位置工具函数示例
Oct 03 Javascript
详解JavaScript树结构
Jan 09 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
Feb 19 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
Jul 27 Javascript
webpack配置sass模块的加载的方法
Jul 30 Javascript
Vue 中使用 CSS Modules优雅方法
Apr 09 Javascript
如何通过setTimeout理解JS运行机制详解
Mar 23 Javascript
Vue 中如何正确引入第三方模块的方法步骤
May 05 Javascript
jQuery 筛选器简单操作示例
Oct 02 jQuery
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
PHP 文件类型判断代码
2009/03/13 PHP
在MongoDB中模拟Auto Increment的php代码
2011/03/06 PHP
thinkphp实现图片上传功能分享
2014/03/04 PHP
PHP使用CURL模拟登录的方法
2015/07/08 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
javascript算法学习(直接插入排序)
2011/04/12 Javascript
jquery $.ajax相关用法分享
2012/03/16 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
2012/05/16 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
2013/04/27 Javascript
jquery动态添加option示例
2013/12/30 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
2014/01/26 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
2015/06/18 Javascript
详解基于angular路由的requireJs按需加载js
2017/01/20 Javascript
原生js实现可拖拽效果
2017/02/28 Javascript
node内置调试方法总结
2018/02/22 Javascript
基于Vue实现可以拖拽的树形表格实例详解
2018/10/18 Javascript
js序列化和反序列化的使用讲解
2019/01/19 Javascript
javascript跳转与返回和刷新页面的实例代码
2019/11/20 Javascript
JS实现秒杀倒计时特效
2020/01/02 Javascript
微信小程序接入腾讯云验证码的方法步骤
2020/01/07 Javascript
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
Python3基础之函数用法
2014/08/13 Python
Python遍历numpy数组的实例
2018/04/04 Python
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
Python 单例设计模式用法实例分析
2019/09/23 Python
详解移动端Html5页面中1px边框的几种解决方法
2018/07/24 HTML / CSS
如何高效率的查找一个月以内的数据
2012/04/15 面试题
const和static readonly区别
2013/05/20 面试题
自我评价如何写好?
2014/01/05 职场文书
新年晚会主持词
2014/03/24 职场文书
项目负责人任命书
2014/06/04 职场文书
公司租房协议书
2014/10/14 职场文书
毕业生就业推荐表自我评价
2015/03/02 职场文书
canvas多重阴影发光效果实现
2021/04/20 Javascript
python中的plt.cm.Paired用法说明
2021/05/31 Python
Pygame如何使用精灵和碰撞检测
2021/11/17 Python