Knowledge about touch event parsing and encapsulation

touch event analysis

1. touchstart event: Triggered when a finger touches the screen, even if there is already a finger on it It will also trigger on the screen.

2. touchmove event: Triggered continuously when the finger slides on the screen. During this event, calling the preventDefault() event can prevent scrolling.

3. touchend event: Triggered when the finger leaves the screen.

4. touchcancel event: Triggered when the system stops tracking touches. Regarding the exact departure time of this event, there is no specific explanation in the document, so we can only guess.

#The above events will bubble up and can all 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 attributes in mouse practice: bubbles (type of bubble event), cancelable (whether the preventDefault() method can be used to cancel the default action associated with the event), clientX (return When the event is triggered, the horizontal coordinate of the mouse pointer), clientY (returns the vertical coordinate of the mouse pointer when the event is triggered), screenX (when an event is triggered, the horizontal coordinate of the mouse pointer) and screenY (returns when an event is triggered) The vertical coordinate of the mouse pointer when an event is triggered). In addition to the common DOM properties, touch events also contain the following three properties for tracking touches.

• touches: An array of touch objects representing the currently tracked touch operations.

• targetTouches: An array of Touch objects that trigger events for the current element.

• changeTouches: An array of Touch objects indicating what has changed since the last touch.

#Each Touch object contains the following properties.

　clientX: The x coordinate of the touch target in the viewport.

　clientY: The y coordinate of the touch target in the viewport.

　identifier: The unique ID that identifies the touch.

　pageX: The x coordinate of the touch target in the page.

　pageY: The y coordinate of the touch target in the page.

　screenX: The x coordinate of the touch target on the screen.

　screenY: The y coordinate of the touch target on the screen.

　target: The striking DOM node target.

The above is the detailed content of Knowledge about touch event parsing and encapsulation. For more information, please follow other related articles on the PHP Chinese website!