JS手机端touch事件计算滑动距离的方法示例
2017-10-26 12:07
796 查看
本文实例讲述了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事件相关操作与技巧大全》、《JavaScript操作DOM技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- 手机端滑动、长按事件插件touchswipe.js的使用示例
- js监听手机端的touch滑动事件
- Touch事件及触屏滑动距离计算
- touch事件计算滑动距离
- js实现滑动触屏事件监听的方法
- JS实现动态给标签控件添加事件的方法示例
- 从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
- JS计算两个时间相差分钟数的方法示例
- 百度地图开发,计算两个点间直线距离js方法
- 使用JS监听鼠标滚轮事件,并且滑动一次只执行一次事件方法
- 浅谈移动端之js touch事件 手势滑动事件
- 浅谈移动端之js touch事件 手势滑动事件
- JS简单实现滑动加载数据的方法示例
- 从百度地图API中抠出来的一个js方法,计算百度地图坐标距离
- 关于RecyclerView与ListView控件滑动距离的计算方法
- Js利用console计算代码运行时间的方法示例
- 移动端上下滑动事件之--坑爹的touch.js
- js touch事件 手势滑动事件总结
- 移动端上下滑动事件之--坑爹的touch.js
- zepto.js滑动事件,jquery获得url参数,手机端双击图片和手势放大