这次给大家带来h5触摸事件中如何判断用户滑动方向，h5触摸事件中判断用户滑动方向的注意事项有哪些，下面就是实战案例，一起来看一下。
接口
touchevent
touchevent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等。每 个 touch 对象代表一个触点; 每个触点都由其位置，大小，形状，压力大小，和目标 element 描述。 touchlist 对象代表多个触点的一个列表.
触摸事件的类型
为了区别触摸相关的状态改变，存在多种类型的触摸事件。可以通过检查触摸事件的 touchevent.type 属性来确定当前事件属于哪种类型
touchstart：当用户在触摸平面上放置了一个触点时触发。
touchend：当一个触点被用户从触摸平面上移除（当用户将一个手指离开触摸平面）时触发。
touchmove：当用户在触摸平面上移动触点时触发。
touchcancel：当触点由于某些原因被中断时触发。
判断滑动方向
基本原理就是记录开始滑动（touchstart）和结束滑动（touchend）的坐标位置，然后进行相对位置的计算。
touchstart:function(e){ startx = e.touches[0].pagex; starty = e.touches[0].pagey; e = e || window.event; },touchend:function(e){ const that = this; endx = e.changedtouches[0].pagex; endy = e.changedtouches[0].pagey; that.upordown(startx,starty,endx,endy);},upordown:function (startx, starty, endx, endy) { const that = this; let direction = that.getslidedirection(startx, starty, endx, endy); switch(direction) { case 0: console.log(没滑动); break; case 1: console.log(向上); break; case 2: console.log(向下); break; case 3: console.log(向左); break; case 4: console.log(向右); break; default: break; } },//根据起点和终点返回方向 1：向上，2：向下，3：向左，4：向右,0：未滑动 getslidedirection:function (startx, starty, endx, endy) { const that = this; let dy = starty - endy; let dx = endx - startx; let result = 0; //如果滑动距离太短 if(math.abs(dx) < 2 && math.abs(dy) < 2) { return result; } let angle = that.getslideangle(dx, dy); if(angle >= -45 && angle < 45) { result = 4; }else if (angle >= 45 && angle < 135) { result = 1; }else if (angle >= -135 && angle < -45) { result = 2; } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) { result = 3; } return result; }, //返回角度 getslideangle:function (dx, dy) { return math.atan2(dy, dx) * 180 / math.pi; }
原生js方法
除了h5新增的方法外，还可以用原生js判断view的滑动方向，代码如下（可直接运行）：
要注意的是chrome对document.body.scrolltop一直是0，需要改成document.documentelement.scrolltop
<!doctype html><html><head> <meta charset="utf-8"> <title> 脚本之家(jb51.net)</title> <style> p { border: 1px solid black; width: 200px; height: 100px; overflow: scroll; } </style></head><body style="overflow: scroll"><h1>hello word</h1><h1>hello word</h1><h1>hello word</h1><h1>hello word</h1><h1>hello word</h1><h1>hello word</h1><h1>hello word</h1><h1>hello word</h1><h1>hello word</h1><h1>hello word</h1><h1>hello word</h1><h1>hello word</h1><h1>hello word</h1><h1>hello word</h1><h1>hello word</h1><h1>hello word</h1><h1>hello word</h1><h1>hello word</h1><h1>hello word</h1><h1>hello word</h1><h1>hello word</h1><h1>hello word</h1><h1>hello word</h1><h1>hello word</h1><h1>hello word</h1><h1>hello word</h1><h1>hello word</h1><h1>hello word</h1><h1>hello word</h1><h1>hello word</h1><h1>hello word</h1><h1>hello word</h1><h1>hello word</h1><h1>hello word</h1><h1>hello word</h1><h1>hello word</h1><h1>hello word</h1><h1>hello word</h1><h1>hello word</h1><h1>hello word</h1><h1>hello word</h1><h1>hello word</h1><h1>hello word</h1><h1>hello word</h1><h1>hello word</h1><h1>hello word</h1><script> function scroll( fn ) { var beforescrolltop = document.documentelement.scrolltop, fn = fn || function() {}; console.log('beforescrolltop',beforescrolltop); window.addeventlistener(scroll, function() { var afterscrolltop = document.documentelement.scrolltop, delta = afterscrolltop - beforescrolltop; console.log('beforescrolltop',beforescrolltop); console.log('afterscrolltop',afterscrolltop); if( delta === 0 ) return false; fn( delta > 0 ? down : up ); beforescrolltop = afterscrolltop; }, false); } scroll(function(direction) { console.log(direction) });</script></body></html>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
怎样对邮箱地址格式进行验证
css浮动使用技巧
以上就是h5触摸事件中如何判断用户滑动方向的详细内容。