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代码压缩器
Oct 12 Javascript
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
Dec 29 Javascript
JavaScript实现拼音排序的方法
Nov 20 Javascript
JQuery实现绚丽的横向下拉菜单
Dec 19 Javascript
实用框架(iframe)操作代码
Oct 23 Javascript
Javascript复制实例详解
Jan 28 Javascript
前端设计师们最常用的JS代码汇总
Sep 25 Javascript
js 用于检测类数组对象的函数方法
May 02 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
Jul 25 Javascript
React 路由懒加载的几种实现方案
Oct 23 Javascript
使用原生JS实现滚轮翻页效果的示例代码
May 31 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
Aug 13 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 身份验证方面的函数
2009/10/11 PHP
php中函数的形参与实参的问题说明
2010/09/01 PHP
PHP根据图片色界在不同位置加水印的方法
2015/07/01 PHP
php数据序列化测试实例详解
2017/08/12 PHP
在Laravel 的 Blade 模版中实现定义变量
2019/10/14 PHP
JavaScript浏览器选项卡效果
2010/08/25 Javascript
EXT窗口Window及对话框MessageBox
2011/01/27 Javascript
js调用AJAX时Get和post的乱码解决方法
2013/06/04 Javascript
JS实现一个列表中包含上移下移删除等功能
2014/09/24 Javascript
PHP PDO操作总结
2014/11/17 Javascript
JQuery中使用on方法绑定hover事件实例
2014/12/09 Javascript
Javascript技术栈中的四种依赖注入小结
2016/02/27 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
2017/07/03 Javascript
JS实现自定义弹窗功能
2018/08/08 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
2019/02/11 Javascript
原生JS实现图片懒加载之页面性能优化
2019/04/26 Javascript
JavaScript 空间坐标的使用
2020/08/19 Javascript
python不换行之end=与逗号的意思及用途
2017/11/21 Python
浅谈Python中带_的变量或函数命名
2017/12/04 Python
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
Win10下python 2.7.13 安装配置方法图文教程
2018/09/18 Python
Django-Rest-Framework 权限管理源码浅析(小结)
2018/11/12 Python
Python 通过调用接口获取公交信息的实例
2018/12/17 Python
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
2020/03/18 HTML / CSS
美国内衣品牌:Leonisa
2016/08/14 全球购物
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
PatPat阿根廷:妈妈们的购物平台
2019/05/30 全球购物
材料物理专业个人求职信
2013/12/15 职场文书
国际商务专业职业生涯规划书范文
2014/01/17 职场文书
家长对孩子的感言
2014/03/10 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书
研究生就业推荐表导师评语
2014/12/31 职场文书
财务会计岗位职责
2015/02/03 职场文书
如何做好工作总结!
2019/04/10 职场文书