H5 case sharing: Mobile Touch event to determine the direction of the swipe gesture

Mobile Touch Event determines the direction of the swipe gesture

Method One

1. When starting a Touchstart event, get the horizontal startx and ordinate starty of the finger at this moment;
2. When the Touchmove event is triggered, the horizontal moveendx and ordinate moveendy of the finger are obtained at this point, and finally, the direction of the finger on the mobile screen is judged by the coordinate difference obtained two times.

idea : Subtract the starting coordinates of the touchstart with the last coordinate of the touchmove, and if the result of X is positive, then the finger is drawn from left to right, and if the result of X is negative, then the finger is drawn from right to left, and if the result of Y is positive, the finger is drawn from the top down. The result of Y, if negative, indicates that the finger is drawn from the bottom upwards.

The specific code is as follows :

var mybody = document.getelementsbytagname (' body ') [0];

Slide handling

var StartX, Starty, Moveendx, Moveendy, X, Y;

Mybody.addeventlistener (' Touchstart ', function (e) {

E.preventdefault ();

StartX = E.touches[0].pagex;

Starty = E.touches[0].pagey;

});

Mybody.addeventlistener (' Touchmove ', function (e) {

E.preventdefault ();

Moveendx = E.changedtouches[0].pagex;

Moveendy = E.changedtouches[0].pagey;

X = Moveendx-startx;

Y = Moveendy-starty;

if (X > 0) {alert (' Right ');}

else if (X < 0) {alert (' left ');}

else if (Y > 0) {alert (' Down ');}

else if (Y < 0) {alert (' Up ');}

Else{alert (' no sliding ');}

});

However, in the actual operation, the finger up and down sliding is difficult to do round bow, as long as a little bit oblique, as long as a little bit oblique, will be the x-axis judgment to take over, and our actual operation will deviate from . At this point you need to add a special judgment technique, the code is modified as follows :

var mybody = document.getelementsbytagname (' body ') [0];

Slide handling

var StartX, Starty, Moveendx, Moveendy, X, Y;

Mybody.addeventlistener (' Touchstart ', function (e) {

E.preventdefault ();

StartX = E.touches[0].pagex;

Starty = E.touches[0].pagey;

}, False);

Mybody.addeventlistener (' Touchmove ', function (e) {

E.preventdefault ();

Moveendx = E.changedtouches[0].pagex;

Moveendy = E.changedtouches[0].pagey;

X = Moveendx-startx;

Y = Moveendy-starty;

if (Math.Abs (x) > Math.Abs (Y) && X > 0) {

Alert ("right");

}

else if (Math.Abs (x) > Math.Abs (Y) && X < 0) {

Alert ("left");

}

else if (Math.Abs (Y) > Math.Abs (X) && y > 0) {

Alert ("Down");

}

else if (Math.Abs (Y) > Math.Abs (X) && y < 0) {

Alert ("Up");

}

else{

Alert ("No swipe");

}

});

The above code, in the test still can not achieve the desired effect, because there is another problem-thebody of the elements of the high-level investigation, found that its value is 0;
The following code should also be added on this basis:

var mybody = document.getelementsbytagname (' body ') [0];

var h = document.documentElement.clientHeight;

Mybody.style.height = h + ' px ';

In this, the mobile mobile end of the finger has been implemented on the slide, slide, Zoli and right slide operation.

Method Two

1. Swipe the screen event to use Touchstart in HTML5 to slide the start event and the Touchmove slide end event.

2, the direction of judgment: The starting point to do a plane coordinate system, and the end line to do straight lines, straight and x positive half axis calculation angle; We split the line at a 45-degree angle, such as: As long as the sliding angle is greater than or equal to 45 degrees and less than 135 degrees, it is determined to slide upward. ：

3. Use math.atan2 to calculate the line angle formed from the starting point and end point.

Note: The standard coordinate system is not the same as the screen coordinate system, in the screen coordinate system, the upper half axis is negative, to achieve the conversion, only need to swap the y-coordinate starting point and finally position.

The code is as follows:

var h = document.documentElement.clientHeight,

Mybody = document.getElementsByTagName (' body ') [0];

Mybody.style.height = h + ' px ';

return angle

function Getslideangle (dx,dy) {

Return math.atan2 (DY,DX) * 180/MATH.PI;

}

Return direction based on start and end 1: Up, 2: down, 3: Left, 4: Right, 0: not sliding

function Getslidedirection (Startx,starty, EndX, EndY) {

var dy = Starty-endy;

var dx = Endx-startx;

var result = 0;

If the sliding distance is too short

if (Math.Abs (dx) < 2 && math.abs (DY) < 2) {

return result;

}

var angle = getslideangle (dx, dy);

if (angle >= -45 && Angle < 45) {

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;

}

Slide handling

var StartX, Starty;

Mybody.addeventlistener (' Touchstart ', function (EV) {

Ev.preventdefault ();

StartX = Ev.touches[0].pagex;

Starty = Ev.touches[0].pagey;

}, False);

Mybody.addeventlistener (' Touchmove ', function (EV) {

var endx, EndY;

Ev.preventdefault ();

EndX = Ev.changedtouches[0].pagex;

EndY = Ev.changedtouches[0].pagey;

var direction = Getslidedirection (StartX, Starty, EndX, EndY);

switch (direction) {

Case 0:

Alert ("No swipe");

Break

Case 1:

Alert ("Up");

Break

Case 2:

Alert ("Down");

Break

Case 3:

Alert ("left");

Break

Case 4:

Alert ("right");

Break

Default

}

}, False);

PS: Use the Touchmove event to get the endpoint coordinates instead of the Touchend event, because when you just tap the screen, the Touchend event is triggered, but the Touchmove event is not triggered. This will result in the EndX obtained in the touchend, resulting in inaccurate endy values. For example, sliding and then clicking may also trigger a sliding event .

In addition this code just provides a way to judge the direction of the slide screen, but also needs to be modified according to the specific needs of the project to improve!

H5 case sharing: Mobile Touch event to determine the direction of the swipe gesture