JS手机端touch事件计算滑动距离的方法示例
本文实例讲述了JS手机端touch事件计算滑动距离的方法。分享给大家供大家参考，具体如下：
计算手势在手机屏幕上滑动时，手势滑动的距离，代码如下：
functionwetherScroll(){
varstartX=startY=endX=endY=0;
varbody=document.getElementsByTagName("body");
body.bind('touchstart',function(event){
vartouch=event.targetTouches[0];
//滑动起点的坐标
startX=touch.pageX;
startY=touch.pageY;
//console.log("startX:"+startX+","+"startY:"+startY);
});
body.bind("touchmove",function(event){
vartouch=event.targetTouches[0];
//手势滑动时，手势坐标不断变化，取最后一点的坐标为最终的终点坐标
endX=touch.pageX;
endY=touch.pageY;
//console.log("endX:"+endX+","+"endY:"+endY);
})
body.bind("touchend",function(event){
vardistanceX=endX-startX,
distanceY=endY-startY;
//console.log("distanceX:"+distanceX+","+"distanceY:"+distanceY);
//移动端设备的屏幕宽度
varclientHeight;=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程序设计有所帮助。