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获取IUSR_机器名和IWAM_机器名帐号的密码
Dec 06 Javascript
在js文件中写el表达式取不到值的原因及解决方法
Dec 23 Javascript
js获取判断上传文件后缀名的示例代码
Feb 19 Javascript
jQuery中noconflict函数的实现原理分解
Feb 03 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
Apr 20 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
Jul 28 Javascript
微信小程序 navigation API实例详解
Oct 02 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
Oct 28 Javascript
Puppeteer 爬取动态生成的网页实战
Nov 14 Javascript
性能优化篇之Webpack构建速度优化的建议
Apr 03 Javascript
JS实现压缩上传图片base64长度功能
Dec 03 Javascript
我所理解的JavaScript中的this指向
Sep 04 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
个人站长制做网页常用的php代码
2007/03/03 PHP
php判断当前用户已在别处登录的方法
2015/01/06 PHP
php使用mysqli向数据库添加数据的方法
2015/03/20 PHP
PHP设计模式之观察者模式实例
2016/02/22 PHP
Zend Framework入门知识点小结
2016/03/19 PHP
PHP计算数组中值的和与乘积的方法(array_sum与array_product函数)
2016/04/01 PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
浅谈laravel框架与thinkPHP框架的区别
2019/10/23 PHP
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
2015/12/03 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
jquery做个日期选择适用于手机端示例
2017/01/10 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
jQuery实现表格的增、删、改操作示例
2019/01/27 jQuery
vue-路由精讲 二级路由和三级路由的作用
2020/08/06 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
2020/09/08 Javascript
[44:47]Ti4 循环赛第三日 iG vs NaVi
2014/07/12 DOTA
netbeans7安装python插件的方法图解
2013/12/24 Python
收藏整理的一些Python常用方法和技巧
2015/05/18 Python
python实现自动重启本程序的方法
2015/07/09 Python
Python脚本暴力破解栅栏密码
2015/10/19 Python
深入理解Python中range和xrange的区别
2017/11/26 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
使用TensorBoard进行超参数优化的实现
2020/07/06 Python
纯css3实现鼠标经过图片显示描述的动画效果
2014/09/01 HTML / CSS
荟萃全球保健品:维他购
2018/05/09 全球购物
英国家居用品和家居装饰品购物网站:Cox & Cox
2019/08/25 全球购物
学校岗位设置方案
2014/01/16 职场文书
服务员岗位职责
2014/01/29 职场文书
四议两公开实施方案
2014/03/28 职场文书
新疆民族团结演讲稿
2014/08/27 职场文书
行政助理岗位职责
2015/02/10 职场文书
周一早安温馨问候祝福语!
2019/07/15 职场文书
创业计划书之冷饮店
2019/09/27 职场文书
MySQL索引篇之千万级数据实战测试
2021/04/05 MySQL