H5 touch event and h5 touch event

H5 touch event and h5 touch event

Many new events have been added to HTML5, but their compatibility problems are not ideal, and the actual application is not too strong. Therefore, we will omit them here. We will only share events that are widely used and compatible, in the future, we will add more shares as compatibility increases. Today we will introduce the following events: touchstart, touchmove, and touchend.

Touch events touchstart, touchmove, and touchend are newly added events in iOS Safari to send information to developers. Because iOs devices have neither a mouse nor a keyboard, PC-side mouse and keyboard events are insufficient when developing interactive web pages for mobile Safari browsers.

When the iPhone 3Gs was released, its mobile Safari browser provided some new events related to touch operations. Later, the Android browser also implemented the same event. Touch starts when the user's fingers are placed on the screen, sliding on the screen, or moving away from the screen. The following details:

 

　　Touchstart event: Triggered when a finger touches the screen, even if one finger is already on the screen.

　　Touchmove event: It is triggered continuously when the finger slides on the screen. During this event, calling the preventDefault () event can prevent scrolling.

　　Touchend event: Triggered when your finger leaves the screen.

　　Touchcancel event: Triggered when the system stops tracking touch. The exact start time of this event is not described in the document. We can only guess it.

 

All the above events will be bubbling and can be canceled. Although these touch events are not defined in the DOM specification, they are implemented in a DOM-compatible manner. Therefore, the event object of each touch event provides common properties in mouse practice: bubbles (bubble event type) and cancelable (whether preventDefault () method to cancel the default action associated with the event), clientX (returns the horizontal coordinates of the mouse pointer when the event is triggered), and clientY (returns when the event is triggered, vertical coordinates of the mouse pointer), screenX (horizontal coordinates of the mouse pointer when an event is triggered), and screenY (returns the vertical coordinates of the mouse pointer when an event is triggered ). In addition to common DOM attributes, touch events also contain the following three attributes for tracking touch.

 

　　Touches: Indicates the array of touch objects for the touch operation of the current trail.

　　TargetTouches: An array of Touch objects specific to the event target.

　　ChangeTouches: Indicates the array of Touch objects that have changed since the last Touch.

 

Each Touch object contains the following attributes.

 

　　ClientX: Touch the x coordinate of the target in the viewport.

　　ClientY: Touch the y coordinate of the target in the viewport.

　　Identifier: The unique ID of the touch.

　　PageX: Touch the x coordinate of the target in the page.

　　PageY: Touch the y coordinate of the target in the page.

　　ScreenX: Touch the x coordinate of the target in the screen.

　　ScreenY: Touch the y coordinate of the target in the screen.

　　Target: Touch the target DOM node.

 

The attribute above is very complicated. Every attribute is so meticulous. Only a small example of a real gun can better understand the details. So small examples are as follows:

1. Function load (){
3. Document. addEventListener ('touchstart', touch, false );
4. Document. addEventListener ('touchmove ', touch, false );
5. Document. addEventListener ('touchend', touch, false );
7. Function touch (event ){
8. Var event = event | window. event;
10. Var oindium = document. getElementById ("Indium ");
12. Switch (event. type ){
13. Case "touchstart ":
14. Oindium. innerHTML = "Touch started (" + event. touches [0]. clientX + "," + event. touches [0]. clientY + ")";
15. Break;
16. Case "touchend ":
17. Oindium. innerHTML = "<br> Touch end (" + event. changedTouches [0]. clientX + "," + event. changedTouches [0]. clientY + ")";
18. Break;
19. Case "touchmove ":
20. Event. preventDefault ();
21. Oindium. innerHTML = "<br> Touch moved (" + event. touches [0]. clientX + "," + event. touches [0]. clientY + ")";
22. Break;
23. }
25. }
26. }
27. Window. addEventListener ('load', load, false );