Organize common touch events developed by HTML5 mobile terminals and html5 touch events

Organize common touch events developed by HTML5 mobile terminals and html5 touch events

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: 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: an array of touch objects for the currently tracked touch operation.

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: Unique ID that identifies a 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.

Each touch point contains the following Touch Information (commonly used ):

Identifier: a numeric value that uniquely identifies the current finger in a touch session. Generally, it is the serial number starting from 0 (android4.1, uc)

Target: DOM element, which is the target of an action.

PageX/clientX/clientY/screenX/screenY: the position where the action occurs on the screen. The page contains the scroll distance, and the client does not contain the scroll distance, screen is based on the screen ).

RadiusX/radiusY/rotationAngle: draws an elliptical shape, which is equivalent to the shape of the finger. The radius and Rotation Angle of the elliptical shape are respectively drawn. The preliminary test is not supported by the browser. Fortunately, the function is not commonly used. You are welcome to give your feedback.

Small JavaScript operation example:

Copy the content to the clipboard using JavaScript Code

1. Var obj = document. getElementByIdx_x ('id ');
2. Obj. addEventListener ('touchmove ', function (event ){
3. // If there is only one finger in the position of this element
4. If (event.tar getTouches. length = 1 ){
5. Event. preventDefault (); // block the default events of the browser. Important
6. Var touch = event.tar getTouches [0];
7. // Place the element in the position of the finger
8. Obj. style. left = touch. pageX-50 + 'px ';
9. Obj. style. top = touch. pageY-50 + 'px ';
10. }
11. }, False );