转：JavaScript 监听手机端的touch滑动事件（滑动手势）
如何监听移动端滑动手势（上 / 下 / 左 / 右滑动），今天记录下。
1 var startx, starty; 2 3 //获得角度 4 function getAngle(angx, angy) { 5 return Math.atan2(angy, angx) * 180 / Math.PI; 6 }; 7 8 //根据起点终点返回方向 1向上滑动 2向下滑动 3向左滑动 4向右滑动 0点击事件 9 function getDirection(startx, starty, endx, endy) { 10 var angx = endx - startx; 11 var angy = endy - starty; 12 var result = 0; 13 14 //如果滑动距离太短 15 if (Math.abs(angx) < 2 && Math.abs(angy) < 2) { 16 return result; 17 } 18 19 var angle = getAngle(angx, angy); 20 if (angle >= -135 && angle <= -45) { 21 result = 1; 22 } else if (angle > 45 && angle < 135) { 23 result = 2; 24 } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) { 25 result = 3; 26 } else if (angle >= -45 && angle <= 45) { 27 result = 4; 28 } 29 return result; 30 } 31 32 //手指接触屏幕 33 document.addEventListener("touchstart", function(e){ 34 startx = e.touches[0].pageX; 35 starty = e.touches[0].pageY; 36 }, false); 37 38 //手指离开屏幕 39 document.addEventListener("touchend", function(e) { 40 var endx, endy; 41 endx = e.changedTouches[0].pageX; 42 endy = e.changedTouches[0].pageY; 43 var direction = getDirection(startx, starty, endx, endy); 44 switch (direction) { 45 case 0: 46 alert("点击！"); 47 break; 48 case 1: 49 alert("向上！"); 50 break; 51 case 2: 52 alert("向下！"); 53 break; 54 case 3: 55 alert("向左！"); 56 break; 57 case 4: 58 alert("向右！"); 59 break; 60 default: 61 alert("点击！"); 62 break; 63 } 64 }, false);
Ps：目前监听的是body事件，可自行定义监听DOM元素。
1 document.getElementById("xxx").addEventListener("touchstart", function(){ 2 xxxxxxxxxx 3 });
文章转载自：https://blog.csdn.net/For_My_Own_Voice/article/details/81537292
