JS手机端touch事件计算滑动距离的方法示例


Posted in Javascript onOctober 26, 2017

本文实例讲述了JS手机端touch事件计算滑动距离的方法。分享给大家供大家参考,具体如下:

计算手势在手机屏幕上滑动时,手势滑动的距离,代码如下:

function wetherScroll(){
    var startX = startY = endX =endY =0;
    var body=document.getElementsByTagName("body");
    body.bind('touchstart',function(event){
      var touch = event.targetTouches[0];
      //滑动起点的坐标
      startX = touch.pageX;
      startY = touch.pageY;
      // console.log("startX:"+startX+","+"startY:"+startY);
    });
    body.bind("touchmove",function(event){
      var touch = event.targetTouches[0];
      //手势滑动时,手势坐标不断变化,取最后一点的坐标为最终的终点坐标
        endX = touch.pageX;
        endY = touch.pageY;
        // console.log("endX:"+endX+","+"endY:"+endY);
    })
    body.bind("touchend",function(event){
      var distanceX=endX-startX,
        distanceY=endY - startY;
        // console.log("distanceX:"+distanceX+","+"distanceY:"+distanceY);
        //移动端设备的屏幕宽度
        var clientHeight; =document.documentElement.clientHeight;
        // console.log(clientHeight;*0.2);
        //判断是否滑动了,而不是屏幕上单击了
        if(startY!=Math.abs(distanceY)){
 //在滑动的距离超过屏幕高度的20%时,做某种操作
          if(Math.abs(distanceY)>clientHeight*0.2){
 //向下滑实行函数someAction1,向上滑实行函数someAction2
          distanceY <0 ? someAction1():someAction2();
        }
        }
        startX = startY = endX =endY =0;
    })
}

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
用JavaScript脚本实现Web页面信息交互
Oct 11 Javascript
javascript模块化是什么及其优缺点介绍
Sep 02 Javascript
js实现特定位取反原理及示例
Jun 30 Javascript
js实现下拉框选择要显示图片的方法
Feb 16 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
May 03 Javascript
Bootstrap 填充Json数据的实例代码
Jan 11 Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 Javascript
使用JavaScript实现链表的数据结构的代码
Aug 02 Javascript
React进阶学习之组件的解耦之道
Aug 07 Javascript
微信小程序将字符串生成二维码图片的操作方法
Jul 17 Javascript
JavaScript插入排序算法原理与实现方法示例
Aug 06 Javascript
基于vuex实现购物车功能
Jan 10 Vue.js
JavaScript实现二叉树的先序、中序及后序遍历方法详解
Oct 26 #Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
Oct 26 #Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
Oct 26 #Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
Oct 26 #Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
Oct 26 #Javascript
Node.js中环境变量process.env的一些事详解
Oct 26 #Javascript
Sublime Text新建.vue模板并高亮(图文教程)
Oct 26 #Javascript
You might like
基于php下载文件的详解
2013/06/02 PHP
163的邮件用phpmailer发送(实例详解)
2013/06/24 PHP
php倒计时出现-0情况的解决方法
2016/07/28 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
JS的数组的扩展实例代码
2008/07/09 Javascript
详解jquery中$.ajax方法提交表单
2014/11/03 Javascript
浅谈JavaScript实现面向对象中的类
2014/12/09 Javascript
JS实现跟随鼠标闪烁转动色块的方法
2015/02/26 Javascript
Bootstrap入门书籍之(三)栅格系统
2016/02/17 Javascript
PHP实现本地图片上传和验证功能
2017/02/27 Javascript
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
2018/09/13 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
2019/09/02 Javascript
vue源码中的检测方法的实现
2019/09/26 Javascript
简单了解JavaScript作用域
2020/07/31 Javascript
原生js实现自定义难度的扫雷游戏
2021/01/22 Javascript
[06:37]2014DOTA2国际邀请赛 昔日王者渴望重回巅峰
2014/07/12 DOTA
[56:24]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第二局
2016/03/04 DOTA
Python下的twisted框架入门指引
2015/04/15 Python
Python 列表(List) 的三种遍历方法实例 详解
2017/04/15 Python
Django 实现下载文件功能的示例
2018/03/06 Python
基于Python List的赋值方法
2018/06/23 Python
tensorflow更改变量的值实例
2018/07/30 Python
Python单元和文档测试实例详解
2019/04/11 Python
Django如何实现网站注册用户邮箱验证功能
2019/08/14 Python
Django Haystack 全文检索与关键词高亮的实现
2020/02/17 Python
解析Tensorflow之MNIST的使用
2020/06/30 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
python链表类中获取元素实例方法
2021/02/23 Python
html5贪吃蛇游戏使用63行代码完美实现
2013/06/25 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
2016/03/11 HTML / CSS
澳大利亚电商Catch新西兰站:Catch.co.nz
2020/05/30 全球购物
人力资源部经理助理岗位职责
2014/03/04 职场文书
社区食品安全实施方案
2014/03/28 职场文书
2014年科普工作总结
2014/12/06 职场文书
人事行政部各岗位职责说明书!
2019/07/15 职场文书