浅谈移动端之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 相关文章推荐
尝试在让script的type属性等于text/html
Jan 15 Javascript
js 调用百度地图api并在地图上进行打点添加标注
May 13 Javascript
jQuery实现简单的间隔向上滚动效果
Mar 09 Javascript
JS实现三个层重叠点击互相切换的方法
Oct 06 Javascript
ajax跨域调用webservice的实现代码
May 09 Javascript
jQuery 的 ready()的纯js替代方法
Nov 20 Javascript
12条写出高质量JS代码的方法
Jan 07 Javascript
在Angular中使用JWT认证方法示例
Sep 10 Javascript
详解webpack loader和plugin编写
Oct 12 Javascript
vue实现与安卓、IOS交互的方法
Nov 02 Javascript
layui table 获取分页 limit的方法
Sep 20 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
Oct 23 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
PHP中上传大体积文件时需要的设置
2006/10/09 PHP
如何利用php+mysql保存和输出文件
2006/10/09 PHP
php面向对象中static静态属性和静态方法的调用
2015/02/08 PHP
PHP抓取网页、解析HTML常用的方法总结
2015/07/01 PHP
使用一个for循环将N*N的二维数组的所有值置1实现方法
2017/05/29 PHP
php框架CI(codeigniter)自动加载与自主创建对象操作实例分析
2020/06/06 PHP
Javascript数组的排序 sort()方法和reverse()方法
2012/06/04 Javascript
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
jQuery团购倒计时特效实现方法
2015/05/07 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
2015/09/14 Javascript
jQuery ajax时间差导致的变量赋值问题分析
2016/01/22 Javascript
分享我对JS插件开发的一些感想和心得
2016/02/04 Javascript
Javascript设计模式之装饰者模式详解篇
2017/01/17 Javascript
如何理解jQuery中的ajaxSubmit方法
2017/03/13 Javascript
JS实现加载和读取XML文件的方法详解
2017/04/24 Javascript
详解React服务端渲染从入门到精通
2019/03/28 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
2019/10/31 Javascript
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
vue项目中锚点定位替代方式
2019/11/13 Javascript
nuxt 每个页面head标签内容设置方式
2020/11/05 Javascript
[51:43]OG vs LGD 2018国际邀请赛淘汰赛BO3 第五场 8.26
2018/08/30 DOTA
浅析Python中MySQLdb的事务处理功能
2016/09/21 Python
Python 新建文件夹与复制文件夹内所有内容的方法
2018/10/27 Python
Python 余弦相似度与皮尔逊相关系数 计算实例
2019/12/23 Python
keras导入weights方式
2020/06/12 Python
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
英国户外玩具儿童游乐设备网站:TP Toys(蹦床、攀爬框架、秋千、滑梯和游戏屋)
2018/04/09 全球购物
C语言变量的命名规则都有哪些
2013/12/27 面试题
药学专业个人自我评价
2013/11/11 职场文书
乡村卫生服务一体化管理实施方案
2014/03/30 职场文书
我的梦中国梦演讲稿
2014/04/23 职场文书
《李广射虎》教学反思
2014/04/27 职场文书
《鲁班学艺》读后感3篇
2019/11/27 职场文书
用javascript制作qq注册动态页面
2021/04/14 Javascript
java基础——多线程
2021/07/03 Java/Android
Python中第三方库Faker的使用详解
2022/04/02 Python