Home>Web design tutorial>HTML tutorial

Implementation of html5 touch event to determine sliding direction

Author：Eve Cole Update Time：2025-03-23 02:00:02

In order to provide strong support for touch interfaces, touch events provide the ability to respond to user operations on the touch screen or touch pad.

interface

TouchEvent

TouchEvent is a type of event that describes the state changes of fingers on the touch surface (touch screen, touch pad, etc.). 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. A TouchList object represents a list of multiple touch points.

Type of touch event

To distinguish between touch-related state changes, there are multiple types of touch events. You can determine what type the current event is by checking the TouchEvent.type property of the touch event.

  1. touchstart: triggered when the user places a touch point on the touch surface.
  2. touchend: Triggered when a touch point is removed from the touch surface by the user (when the user lifts a finger off the touch surface).
  3. touchmove: Triggered when the user moves a contact point on the touch surface.
  4. touchcancel: Triggered when the contact is interrupted for some reason.
Determine sliding direction

The basic principle is to record the coordinate positions of the start sliding (touchStart) and the end sliding (touchEnd), and then calculate the relative position. 

 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 (no sliding); break; case 1: console.log (up); break; case 2: console.log (down); break; case 3: console.log(left); break; case 4: console.log(right); break; default: break; } },//Return direction 1: up, 2: down, 3 according to the starting point and end point : Left, 4: Right, 0: Not sliding GetSlideDirection:function (startX, startY, endX, endY) { const that = this; let dy = startY - endY; let dx = endX - startX; let result = 0; //If the sliding distance is too short 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; }, //Return the angle 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 has always set document.body.scrollTop to 0 and needs to be changed to document.documentElement.scrollTop. 

 <!DOCTYPE html><html><head> <meta charset=utf-8> <title> VeVb武林网(vevb.com)</title> <style> div { 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>

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.

Related Articles