Analysis of the principle of JS touch touch screen

Before we did a lot of touch screen effects, then, today, we will analyze the next JS touch screen principle. In fact, we Baidu a bit JS touch can basically find this article "Fingertip js--multi-touch web front-end development one: for touch processing", I think this article many beginners JS touch people have seen.

Let's illustrate it by example today. In the realization of touch screen, we must use JS AddEventListener, and then add Touchstart,touchmove,touchend. Today we add jquery to the code, just to get the ID and CSS, hehe, after all, jq everyone is using. But for the addition of events, we still have to use Document,getelementbyid this mode, because this thing only JS, jquery does not touch such things.

As you can see, in the code there is this sentence, E.preventdefault (), if you do not write this sentence, you touch the screen, the page will slide, so its role is huge ...

E.touches[0] What does it mean? Is the first in the gesture, we think is touch bar, touch screen and other two finger gestures, we learn a kind of today, ah ...

We achieved the left,top of the image and the touch screen position of the hand, then, Touchstart finished ...

Our Isdrag is used to determine whether we can drag, we use the position of the hand drag after the position of the image minus Touchstart, we can get the position after the move, so we completed the Touchmove this process.

For Touchend, we write a ifdrag=false, which means no more dragging ...