This article mainly introduces the compilation of common touch events developed by HTML5 mobile terminal. The event objects of touch events are basically corresponding to the attributes of the mouse operation. Friends who need it can refer to it.
Many new events have been added to HTML5, but because their compatibility issues are not ideal and their application is not very practical, they are basically omitted here. We only share events with good compatibility with wide applications. We will add and share them one after another as the compatibility situation improves in the future. The events that I will introduce to you today are mainly touch events: touchstart, touchmove and touchend.
At the beginning, touch events touchstart, touchmove and touchend are newly added events for the iOS version of Safari browser to convey some information to developers. Because the iOs device has neither a mouse nor a keyboard, when developing interactive web pages for mobile Safari browsers, mouse and keyboard events on the PC are not enough.
When the iPhone 3Gs was released, its own mobile Safari browser provided some new events related to touch operations. The same event was then implemented by the browser on Android. A touch event will start when the user puts his finger on the screen, when sliding on the screen, or when moving away from the screen. The following details are explained:
touchstart event: Triggered when the finger touches the screen, it will trigger even if one finger is already placed on the screen.
touchmove event: triggers continuously when the finger slides on the screen. During this event, calling preventDefault() event can prevent scrolling.
touchend event: Triggered when the finger leaves the screen.
touchcancel event: Triggered when the system stops tracking touch. The document does not specify the exact departure time of this event, so we can only guess.
All the above events will bubbling and can be cancelled. Although these touch events are not defined in the DOM specification, they are implemented in a DOM compatible way. Therefore, each touch event event object provides common attributes in mouse practice: bubbles (the type of bubble event), cancelable (whether the default action associated with the event can be canceled with the preventDefault() method), 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 (returns the horizontal coordinates of the mouse pointer when the event is triggered), and screenY (returns the vertical coordinates of the mouse pointer when the event is triggered). In addition to common DOM properties, touch events also contain the following three attributes for tracking touch.
touches: an array of touch objects representing 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-coordinate 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-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: Touching the target of the DOM node.
Each touch point contains the following touch information (commonly used):
identifier: A value that uniquely identifies the current finger in the touch session. Generally, the flow number starting from 0 (android4.1, uc)
target: DOM element, is the target targeted by the action.
pageX/pageX/clientX/clientY/screenX/screenY: A value, where the action occurs on the screen (page contains the scroll distance, client does not contain the scroll distance, screen is based on the screen).
radiusX/radiusY/rotationAngle: Draw an ellipse approximately equivalent to the shape of a finger, two radii and rotation angle of the ellipse respectively. The preliminary test browser does not support it, but fortunately the functions are not commonly used, so everyone is welcome to feedback.
Small examples of JavaScript operations:
JavaScript Code Copy content to clipboard