JS enables mobile terminals to determine whether to pull up or drop down, and js decline

JS enables mobile terminals to determine whether to pull up or drop down, and js decline

1. Use the touch screen and touchstart to calculate the sliding distance between the front and back, and determine whether the distance is pulled up or down.

2. Differences between distance in js: pageY, clientY, and offsetY:

OffsetY: the offset distance from the parent node.

ClientY: relative to the browser, the scroll wheel distance is not included.

PageY: relative to the browser, the scroll distance is included. In this example, when pageY is used, the position-startY is recorded on the touch screen, and-endY is recorded at the end, the two subtraction values are positive and negative to determine whether the shift is up or down.

3. touchstart has the touches attribute, and touchend has the changedTouches attribute. The attributes include pageY and pageX.

// Slide to handle var startX, startY; document. addEventListener ('touchstarstart', function (ev) {startX = ev. touches [0]. pageX; startY = ev. touches [0]. pageY;}, false); document. addEventListener ('touchend', function (ev) {var endX, endY; endX = ev. changedTouches [0]. pageX; endY = ev. changedTouches [0]. pageY; var direction = GetSlideDirection (startX, startY, endX, endY); switch (direction) {case 0: alert ("no operation"); break; case 1: // up alert ("up"); break; case 2: // down alert ("down"); break; default :}, false );

IV,

Function GetSlideDirection (startX, startY, endX, endY) {var dy = startY-endY; // var dx = endX-startX; var result = 0; if (dy> 0) {// sliding up result = 1;} else if (dy <0) {// sliding down result = 2;} else {result = 0;} return result ;}

Summary

The above section describes how to implement the JS function for mobile terminals to determine whether to pull up or drop down. I hope it will be helpful to you. If you have any questions, please leave a message for me, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!