H5 How to determine the user's swipe direction in touch events

This time to bring you H5 touch event in how to determine the user's sliding direction, H5 touch events to determine the user's sliding direction of attention to what, the following is the actual case, together to see.

Interface

TouchEvent

TouchEvent is a class of events that describe the state of a finger on a touch plane (touch screen, touchpad, and so on). This type of event is used to describe one or more contacts so that the developer can detect the movement of the contacts, the increase and decrease of the contacts, and so on. Each Touch object represents a touch point; Each contact is described by its position, size, shape, pressure size, and target element. The Touchlist object represents a list of multiple contacts.

Types of touch events

To differentiate between touch-related state changes, there are several types of touch events. You can determine which type the current event belongs to by examining the Touchevent.type property of the touch event

1. Touchstart: Triggered when the user places a contact on the touch plane.

2. Touchend: Triggered when a contact is removed from the touch plane by the user (when the user leaves a finger on the touch plane).

3. Touchmove: Triggered when the user moves the contact on the touch plane.

4. Touchcancel: Triggered when the contact is interrupted for some reason.

Judging the sliding direction

The basic principle is to record the coordinates of the start slide (touchstart) and the end Slip (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 = this;    EndX = E.changedtouches[0].pagex;    EndY = E.changedtouches[0].pagey;    That.upordown (Startx,starty,endx,endy);},upordown:function (StartX, Starty, EndX, EndY) {const = this; Let's direction = that.    Getslidedirection (StartX, Starty, EndX, EndY);        switch (direction) {case 0:console.log ("no swipe");      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 based on start and end 1: Up, 2: down, 3: Left, 4: Right, 0: not sliding getslidedirection:function (StartX, Starty, EndX, EndY) {const that = th    is;    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 =.    Getslideangle (dx, dy);    if (angle >= -45 && Angle <) {result = 4;    }else if (angle >= && 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 angle getslideangle:function (dx, dy) {return math.atan2 (dy, dx) * 180/MATH.PI; }

Native JS method

In addition to the H5 new method, you can also use the native JS to determine the view's sliding direction, the code is as follows (can be run directly):

It's important to note that Chrome has been 0 for Document.body.scrollTop and needs to be changed to Document.documentElement.scrollTop

<!  DOCTYPE html>
Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

How to verify the format of the email address

CSS Floating Use Tips