This time I will show you how to determine the user's sliding direction in H5 touch events. What are the precautions for determining the user's sliding direction in H5 touch events? Here is a practical case, let's take a look.
Interface
##TouchEvent
TouchEvent is a type that describes the movement of a finger on a touch plane (touch screen, Touchpad, etc.) state change events. This type of event is used to describe one or more touch points, allowing developers to detect the movement of touch points, the increase and decrease of touch points, etc. Each Touch object represents a touch point; each touch point is described by its position, size, shape, pressure level, and target element. The TouchList object represents a list of multiple touch points.Types of touch events
In order to distinguish touch-related state changes, there are many type of touch event. You can determine what type the current event is by checking the TouchEvent.type property of the touch eventDetermine the sliding direction
The basic principle is to record the coordinates of the start sliding (touchStart) and the end sliding (touchEnd) position, and then perform relative position calculations.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; }
Native JS method
In addition to the new methods in H5, you can also use native JS to determine the sliding direction of the view. The code is as follows ( Can be run directly): It should be noted that chrome’s document.body.scrollTop is always 0 and needs to be changed to 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>
How to verify the email address format
The above is the detailed content of How to determine the user's sliding direction in H5 touch events. For more information, please follow other related articles on the PHP Chinese website!