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 相关文章推荐
准确获得页面、窗口高度及宽度的JS
Nov 26 Javascript
判断在css加载完毕后执行后续代码示例
Sep 03 Javascript
node.js实现BigPipe详解
Dec 05 Javascript
jquery select2的使用心得(推荐)
Dec 04 Javascript
javascript事件的绑定基础实例讲解(34)
Feb 14 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
Apr 25 Javascript
vue实现多条件和模糊搜索功能
May 28 Javascript
JS如何实现动态添加的元素绑定事件
Nov 12 Javascript
JS this关键字在ajax中使用出现问题解决方案
Jul 17 Javascript
js实现删除json中指定的元素
Sep 22 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
Nov 03 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
Nov 16 Javascript
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
火车头采集器3.0采集图文教程
2007/03/17 PHP
php程序员应具有的7种能力小结
2014/11/27 PHP
PHP生成各种常见验证码和Ajax验证过程
2016/01/10 PHP
Yii实现显示静态页的方法
2016/04/25 PHP
浅谈php的TS和NTS的区别
2019/03/13 PHP
符合标准的js表单提交的代码
2007/09/13 Javascript
javascript时间自动刷新实现原理与步骤
2013/01/06 Javascript
NodeJS Express框架中处理404页面一个方式
2014/05/28 NodeJs
jQuery自带的一些常用方法总结
2014/09/03 Javascript
原生javascript实现简单的datagrid数据表格
2015/01/02 Javascript
bootstrap输入框组代码分享
2016/06/07 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
2016/12/13 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
2017/05/17 Javascript
ionic2懒加载配置详解
2017/09/01 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
2018/03/19 Javascript
RxJS的入门指引和初步应用
2019/06/15 Javascript
JavaScript代码模拟鼠标自动点击事件示例
2020/08/07 Javascript
Python多进程机制实例详解
2015/07/02 Python
numpy中以文本的方式存储以及读取数据方法
2018/06/04 Python
微信公众号token验证失败解决方案
2019/07/22 Python
Python 矩阵转置的几种方法小结
2019/12/02 Python
Python自动发送和收取邮件的方法
2020/08/12 Python
python使用建议与技巧分享(二)
2020/08/17 Python
K近邻法(KNN)相关知识总结以及如何用python实现
2021/01/28 Python
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
经济系大学生求职信
2013/10/01 职场文书
医院后勤自我鉴定
2013/10/13 职场文书
军训 自我鉴定
2014/02/03 职场文书
新学期决心书
2014/03/11 职场文书
校企合作协议书
2014/04/16 职场文书
《三亚落日》教学反思
2014/04/26 职场文书
水污染治理工程专业求职信
2014/06/14 职场文书
七一建党节演讲稿
2014/09/11 职场文书
2015年清明节活动总结
2015/02/09 职场文书
小学体育跳绳课教学反思
2016/02/16 职场文书
2019年消防宣传标语集锦
2019/11/21 职场文书