Shulou(Shulou.com)06/01 Report--

This article focuses on "what are the commonly used touch events in HTML5". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn what are the common touch events in HTML5.

The initial touch events touchstart, touchmove, and touchend are new events added by the iOs version of Safari browser to convey some information to developers. Because iOs devices have neither a mouse nor a keyboard, there are not enough mouse and keyboard events on the PC when developing interactive web pages for mobile Safari browsers.

When iPhone 3Gs was released, its own mobile Safari browser provided some new events related to touch operations. Subsequently, the browser on Android implements the same event. The touch event (touch) starts when the user's finger is placed on the screen, when it slides on the screen, or when it is moved away from the screen. The following details are described:

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

Touchmove event: triggered continuously when the finger is sliding on the screen. During this event, a call to the preventDefault () event prevents scrolling.

Touchend event: triggered when the finger is off the screen.

Touchcancel event: triggered when the system stops tracking the touch. With regard to the exact departure time of this event, there is no specific description in the document, so we can only guess.

All of the above events will bubble and can be cancelled. Although these touch events are not defined in the DOM specification, they are implemented in a DOM-compliant manner. Therefore, the event object of each touch event provides properties that are common in mouse practice: bubbles (type of bubbling event), cancelable (whether to use the 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), clientY (returns the vertical coordinates of the mouse pointer when the event is triggered), screenX (when an event is triggered The horizontal coordinates of the mouse pointer) and screenY (returns the vertical coordinates of the mouse pointer when an event is triggered). In addition to the common DOM properties, the touch event contains the following three properties for tracking touch.

Touches: an array of touch objects that represent the currently tracked touch operation.

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

ChangeTouches: an array of Touch objects that represent what has changed since the last touch.

Each Touch object contains the following properties.

ClientX: touch the x-coordinate of the target in the viewport.

ClientY: touch the y coordinates of the target in the viewport.

Identifier: the unique ID that identifies the touch.

PageX: touch the x-coordinate of the target in the page.

PageY: touch the y coordinates of the target in the page.

ScreenX: touch the x-coordinate of the target on the screen.

ScreenY: touch the y coordinates of the target on the screen.

Target: touches the target DOM node target.

Each touch point contains the following touch information (commonly used):

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

The target:DOM element, which is the target of the action.

PageX/pageX/clientX/clientY/screenX/screenY: a numeric value where the action occurs on the screen (page contains scrolling distance, client does not include scrolling distance, and screen is based on the screen).

RadiusX/radiusY/rotationAngle: draw an ellipse about the shape of a finger, the two radii of the ellipse and the rotation angle. The preliminary test browser does not support it, but the functions are not commonly used. Feedback is welcome.

A small example of JavaScript operation:

JavaScript Code copies content to the clipboard

Var obj = document.getElementByIdx_x ('id')

Obj.addEventListener ('touchmove', function (event) {

/ / if there is only one finger in the position of this element

If (event.targetTouches.length = = 1) {

Event.preventDefault (); / / blocks browser default events, which is important

Var touch = event.targetTouches [0]

/ / put the element in the position of the finger

Obj.style.left = touch.pageX-50 + 'px'

Obj.style.top = touch.pageY-50 + 'px'

}

}, false)

At this point, I believe you have a deeper understanding of "what are the touch events commonly used in HTML5?" you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.