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 相关文章推荐
使Ext的Template可以解析二层的json数据的方法
Dec 22 Javascript
JS获取后台Cookies值的小例子
Mar 04 Javascript
JS在textarea光标处插入文本的小例子
Mar 22 Javascript
node.js中的http.request方法使用说明
Dec 14 Javascript
60个很实用的jQuery代码开发技巧收集
Dec 15 Javascript
深入分析jsonp协议原理
Sep 26 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
Dec 24 Javascript
学习JavaScript设计模式之中介者模式
Jan 14 Javascript
Angular Module声明和获取重载实例代码
Sep 14 Javascript
通过bootstrap全面学习less
Nov 09 Javascript
教你如何编写Vue.js的单元测试的方法
Oct 17 Javascript
Node.js中console.log()输出彩色字体的方法示例
Dec 01 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
使用sockets:从新闻组中获取文章(二)
2006/10/09 PHP
php类
2006/11/27 PHP
ajax+php打造进度条 readyState各状态
2010/03/20 PHP
php 判断访客是否为搜索引擎蜘蛛的函数代码
2011/07/29 PHP
php实现的双向队列类实例
2014/09/24 PHP
php中的ini配置原理详解
2014/10/14 PHP
PHP中创建和验证哈希的简单方法实探
2015/07/06 PHP
PHP连接MSSQL方法汇总
2016/02/05 PHP
Firebug入门指南(Firefox浏览器)
2010/08/21 Javascript
Javascript将string类型转换int类型
2010/12/09 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
js判断日期时间有效性的方法
2015/10/24 Javascript
JS实现鼠标滑过显示边框的菜单效果
2016/09/21 Javascript
js生成随机颜色方法代码分享(三种)
2016/12/29 Javascript
JS数组操作中的经典算法实例讲解
2017/07/26 Javascript
js实现简单分页导航栏效果
2019/06/28 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
2019/07/13 Javascript
vue 解决遍历对象显示的顺序不对问题
2019/11/07 Javascript
在vue中实现echarts随窗体变化
2020/07/27 Javascript
Python之py2exe打包工具详解
2017/06/14 Python
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
使用python实现ftp的文件读写方法
2019/07/02 Python
Python shelve模块实现解析
2019/08/28 Python
Django项目创建到启动详解(最全最详细)
2019/09/07 Python
keras .h5转移动端的.tflite文件实现方式
2020/05/25 Python
python装饰器实现对异常代码出现进行自动监控的实现方法
2020/09/15 Python
使用CSS3设计地图上的雷达定位提示效果
2016/04/05 HTML / CSS
加拿大廉价机票预订网站:CheapOair.ca
2018/03/04 全球购物
优秀村官事迹材料
2014/01/10 职场文书
服务生自我鉴定
2014/01/22 职场文书
顶撞老师检讨书
2014/02/07 职场文书
六查六看自查材料
2014/02/17 职场文书
医学专业大学生职业生涯规划书
2014/10/25 职场文书
农业项目合作意向书
2015/05/08 职场文书
获奖感言范文
2015/07/31 职场文书
学生早退检讨书(范文)
2019/08/19 职场文书