页面滑动，误触解决方法

本文主要是介绍页面滑动，误触解决方法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

实现原理：获取触摸首尾2点的坐标，Math.atan2获得2点连成的直线与x轴正方向的夹角，从而得到滑动的方向！
原理图：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javascript判断手指在移动端上滑动的方向</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
</style>
</head>
<body>
请在移动端，PC上无法查看效果，滑动查看效果<script>

var startx, starty;
//获得角度
function getAngle(angx, angy) {
return Math.atan2(angy, angx) * 180 / Math.PI;
};

//根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动
function getDirection(startx, starty, endx, endy) {
var angx = endx - startx;
var angy = endy - starty;
var result = 0;

//如果滑动距离太短
if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {
return result;
}

return result;
}
//手指接触屏幕
document.addEventListener("touchstart", function(e){
startx = e.touches[0].pageX;
starty = e.touches[0].pageY;
}, false);
//手指离开屏幕
document.addEventListener("touchend", function(e) {
var endx, endy;
endx = e.changedTouches[0].pageX;
endy = e.changedTouches[0].pageY;
var direction = getDirection(startx, starty, endx, endy);
switch (direction) {
case 0:
alert("未滑动！");
break;
case 1:
alert("向上！");
break;
case 2:
alert("向下！");
break;
case 3:
alert("向左！");
break;
case 4:
alert("向右！");
break;
default:
}
}, false);
</script>
</body>
</html>