1. Introduction to Touch Events
The Web page mouse on the PC generates onmousedown, onmouseup, onmouseout, onmouseover, onmousemove events, but on mobile devices such as iphone, ipod Touch, The Ontouchstart, Ontouchmove, Ontouchend, Ontouchcancel events are generated when the Web page on the ipad touches the screen, corresponding to the touch screen start, drag and finish, and the touch screen event and cancellation.
When the finger is pressed, the ontouchstart is triggered;
When moving the finger, trigger ontouchmove;
Triggers the ontouchend when the finger is removed.
When some higher-level events occur (such as phone access or pop-up messages), the current touch operation is triggered, triggering ontouchcancel. The game, archive, and so on are usually paused during ontouchcancel.
2. The relationship between touch events and mouse events
After the touch screen operation, the moment the finger is lifted (i.e. after ontouchend), the system will determine whether the content of the element receiving the event has been changed, if the content is changed, the next event will not be triggered, if not changed, will follow the Mousedown,mouseup, The Click order triggers the event. In particular, the Mouseout event of the previous event is triggered only if a touch-screen event is triggered again.
3. Gesture Events
Gesture event, including Finger tap (click), Flick (flick), double-click (double-click), Finger split, close (scale), turn (rotate) and so on everything the finger can do on the screen, it only has two Or when multiple fingers are placed on the screen, the event handler gets a gestureevent type parameter that contains information about the scale of the finger (which is divided by the two movement) and rotation (the angle of rotation between two fingers). This event is a higher-level package for the touch event, and as with touch, it also includes Gesturestart,gesturechange,gestureend.
Gesture Event Triggering process:
Step 1, first finger down, trigger Touchstart
Step 2, second finger down, trigger Gesturestart
Step 3, trigger the touchstart of the second finger
Step 4, Trigger Gesturechange immediately
Step 5, Finger movement, continuous trigger gesturechange, as the mouse moves on the screen when the trigger MouseMove like
Step 6, second finger lift, trigger gestureend, will no longer trigger Gesturechange
Step 7, trigger the touchend of the second finger
Step 8, Trigger touchstart! Note that multiple fingers on the screen, lifting a root, will refresh the global touch! Re-trigger the touchstart of the first finger
Step 9, lift the first finger and trigger the Touchend
JS event on iphone, ipod Touch, ipad touch screen