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

Editor to share with you how to achieve touch events in HTML5, I hope you have something to gain after reading this article, let's discuss it together!

We know that a lot of events have been added to HTML5, but because their compatibility problems are not very ideal and the actual application is not very strong, we basically omit them here. We only share events that are widely compatible with applications, and we will add them later as the compatibility situation improves. The events introduced to you today are mainly touch events: touchstart, touchmove and touchend.

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.

From this point of view, the above attributes are really very tedious, and each attribute is so meticulous that only a few small examples of real knives and guns can better understand the mystery. So the small examples are as follows.

Function load () {document.addEventListener ('touchstart',touch, false); document.addEventListener (' touchmove',touch, false); document.addEventListener ('touchend',touch, false); function touch (event) {var event = event | | window.event; var oInp = document.getElementById ("inp") Switch (event.type) {case "touchstart": oInp [XSS _ clean] = "Touch started (" + event.touches [0] .clientX + "," + event.touches [0] .clientY + ")"; break; case "touchend": oInp [XSS _ clean] = "

Touch end ("+ event.changedTouches [0] .clientX +", "+ event.changedTouches [0] .clientY +") "; break; case" touchmove ": event.preventDefault (); oInp [XSS _ clean] ="

Touch moved ("+ event.touches [0] .clientX +", "+ event.touches [0] .clientY +") "; break;} window.addEventListener ('load',load, false)

By making a slight change to the above code, you can determine the direction of sliding horizontally, and then the corresponding action on the left, as follows:

Function load () {document.addEventListener ('touchstart',touch, false); document.addEventListener (' touchmove',touch, false); document.addEventListener ('touchend',touch, false); function touch (event) {var event = event | | window.event; var oInp = document.getElementById ("inp"); var distance,clientX_start,clientX_end, minRange=10; this.clientX_start This.direction; this.callbackFun=function () {if (this.direction=='ltr') {console.log ('left to right');} else {console.log ('right to left') } switch (event.type) {case "touchstart": clientX_start=event.touches [0] .clientX; this.clientX_start=clientX_start; break; case "touchend": this.callbackFun (); break Case "touchmove": event.preventDefault (); clientX_end = event.changedTouches [0] .clientX; / / determine the direction of movement distance=clientX_end-this.clientX_start; if (this.clientX_start+minRangeclientX_end) {this.direction='rtl' } break;}} window.addEventListener ('load',load, false); after reading this article, I believe you have a certain understanding of "how to achieve touch events in HTML5". If you want to know more about it, welcome to follow the industry information channel, thank you for reading!

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.