浅谈移动端之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入门教程(2) JS基础知识
Jan 31 Javascript
jquery submit ie6下失效的原因分析及解决方法
Nov 15 Javascript
javascript学习笔记--数字格式类型
May 22 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
May 11 Javascript
JS日期加减,日期运算代码
Nov 05 Javascript
javascript函数自动执行常用方法汇总
Mar 28 Javascript
浅谈javascript中的Function和Arguments
Aug 30 Javascript
Vue.directive()的用法和实例详解
Mar 04 Javascript
浅谈Webpack 持久化缓存实践
Mar 22 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
Mar 13 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
May 06 Javascript
Nuxt的动态路由和参数校验操作
Nov 09 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 加密/解密函数 dencrypt(动态密文,带压缩功能,支持中文)
2009/01/30 PHP
PHP中通过HTTP_USER_AGENT判断是否为手机移动终端的函数代码
2013/02/14 PHP
php pdo操作数据库示例
2017/03/10 PHP
POST一个JSON格式的数据给Restful服务实例详解
2017/04/07 PHP
Aster vs Newbee BO3 第三场2.18
2021/03/10 DOTA
JavaScript 变量基础知识
2009/11/07 Javascript
javascript重写alert方法的实例代码
2013/03/29 Javascript
解析Javascript中中括号“[]”的多义性
2013/12/03 Javascript
js定时器的使用(实例讲解)
2014/01/06 Javascript
js单独获取一个checkbox看其是否被选中
2014/09/22 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
2015/11/09 Javascript
学习javascript文件加载优化
2016/02/19 Javascript
浅谈jQuery中ajaxPrefilter的应用
2016/08/01 Javascript
Angular之指令Directive用法详解
2017/03/01 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
vuejs实现本地数据的筛选分页功能思路详解
2017/11/15 Javascript
Vue核心概念Action的总结
2019/01/18 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
2019/11/26 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
2020/08/18 Javascript
[56:00]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第二场
2018/04/10 DOTA
使用Python判断质数(素数)的简单方法讲解
2016/05/05 Python
Pycharm远程调试openstack的方法
2017/11/21 Python
Python实现的朴素贝叶斯分类器示例
2018/01/06 Python
简单了解python反射机制的一些知识
2019/07/13 Python
python爬取招聘要求等信息实例
2020/11/20 Python
日本网路线上商品代购服务:转送JAPAN
2016/08/05 全球购物
耐克波兰官方网站:Nike波兰
2019/09/03 全球购物
应届生人事助理求职信
2013/11/09 职场文书
致长跑运动员广播稿
2014/01/31 职场文书
艺术设计专业求职自荐信
2014/05/19 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
职场中的你,辞职信写对了吗?
2019/06/26 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书
python生成随机数、随机字符、随机字符串
2021/04/06 Python
使用pandas生成/读取csv文件的方法实例
2021/07/09 Python