本文主要介绍了js手机端touch事件计算滑动距离的方法,结合实例形式分析了javascript响应手机端屏幕上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;
})
}
相关推荐：
有关touch事件解析和封装的知识
解决移动端touchstart事件穿透问题方案
html5手机触屏touch事件的详细介绍
以上就是js手机端touch事件计算滑动距离的方法的详细内容。