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 相关文章推荐
不错的一个日期输入 动态
Nov 06 Javascript
实现复选框全选/全不选切换
Dec 23 Javascript
javascript 表单验证常见正则
Sep 28 Javascript
javascript 二分法(数组array)
Apr 24 Javascript
angularJS 入门基础
Feb 09 Javascript
IE浏览器下PNG相关功能
Jul 05 Javascript
AngularJS全局scope与Isolate scope通信用法示例
Nov 22 Javascript
原生js实现手风琴功能(支持横纵向调用)
Jan 13 Javascript
js实现简单的网页换肤效果
Jan 18 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
一份超级详细的Vue-cli3.0使用教程【推荐】
Nov 15 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 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
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
支持数组的ADDSLASHES的php函数
2010/02/16 PHP
PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)
2017/06/16 PHP
基于PHP实现栈数据结构和括号匹配算法示例
2017/08/10 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
TinyMCE 新增本地图片上传功能
2010/11/05 Javascript
使用PHP+JQuery+Ajax分页的实现
2013/04/23 Javascript
浅析Cookie中的Path与domain
2013/12/18 Javascript
通过隐藏iframe实现文件下载的js方法介绍
2014/02/26 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
2015/05/25 Javascript
JQuery为元素添加样式的实现方法
2016/07/20 Javascript
微信小程序 合法域名校验出错详解及解决办法
2017/03/09 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
2018/03/18 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
2019/03/19 Javascript
vue自定义标签和单页面多路由的实现代码
2020/05/03 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
2020/07/18 Javascript
Element Card 卡片的具体使用
2020/07/26 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
2020/09/02 Javascript
vue3.0 上手体验
2020/09/21 Javascript
跟老齐学Python之print详解
2014/09/28 Python
python检测远程服务器tcp端口的方法
2015/03/14 Python
Python动刷新抢12306火车票的代码(附源码)
2018/01/24 Python
谈谈python中GUI的选择
2018/03/01 Python
python中字符串的操作方法大全
2018/06/03 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
Python 批量刷博客园访问量脚本过程解析
2019/08/30 Python
Python之数据序列化(json、pickle、shelve)详解
2019/08/30 Python
python BlockingScheduler定时任务及其他方式的实现
2019/09/19 Python
python3中rank函数的用法
2019/11/27 Python
Python安装Bs4的多种方法
2020/11/28 Python
泰国网上购物:Shopee泰国
2018/09/14 全球购物
adidas马来西亚官网:adidas MY
2020/09/12 全球购物
质量工程师岗位职责
2013/11/16 职场文书
服务之星获奖感言
2014/01/21 职场文书
服装设计专业自荐信
2014/06/17 职场文书
node快速搭建后台的实现步骤
2022/02/18 NodeJs