JS at your fingertips-multi-touch Web Front-end development 2: Processing simple gestures

This articleArticleDescribes how to process gesture events in multi-touch web development.
Gesture in fruit devices, broadly speaking, includes click, flick, double-click, and scale) rotate and so on. IOS has designed a series of gestures to simulate and extend mouse operations. For example, a click event is triggered when a finger is put down, the mouse slides up and stops, and the onscroll event of the body is triggered. However, the narrow gesture event, that is, the gestureevent object that can addeventlistener, is not very powerful. It is triggered only when two or more fingers are placed on the screen, it only contains the scale and rotation information. For other commonly used gestures, we must use other events to handle them.
Next we will start with a single finger event...
Let's take a look at the simplest gesture. When you put your finger down, you can immediately raise it. What will happen after this gesture is made? Of course, you will think of clicking. In fact, there are still many things happening before clicking. Please refer:

here we will first explain what is a clickable element, which is any HTML element bound with the click, mousedown, mouseup, and mousemove events
(note, elements that are not bound to event processing are not clickable elements ). From this figure, we can see that the first trigger of the hand
is not the click event, but the Mouseover and mousemove events. Then, the system determines whether the content of the element of the received
is changed. If the content is changed, none of the subsequent events will be triggered. if the content is not changed, events are triggered in the order of
mousedown, mouseup, and click. What? Where is mouseout? It is embarrassing to handle this event.
after all the events mentioned above are complete, if you click another clickable element, the
mouseout event of the last clickable element is triggered... We recommend that you do not use mouseout on multiple-touch web pages.
what happens if you don't mention it after you put your finger down? Nothing happens, and no event is triggered. However, if the object
is an IMG and has the alt attribute, this action will display the IMG alt string. If it is a link, this action will display the "open connection in
New window" option, but no user-defined event is triggered.
the last event about a single finger is to move the finger behind it. Note: During the sliding process, no events except touchmove
will be triggered (do not try to process mousemove at this time ). When the finger slides, the entire page should move, unless you
preventdefault the touchmove of the body. When the finger stops, the onscroll of the page will be triggered. Nothing else will happen that we
are familiar.