HTML5 actual combat and analysis of touch events (Touchstart, Touchmove and Touchend) _ Experience Exchange

HTML5 added a lot of events, but because their compatibility problem is not very ideal, the application is not too strong, so basically omitted here, we only share the application of a wide range of compatible with good events, in future, with the compatibility of the upgrade after the increase will continue to add shares. Today's events are mainly about touch events:Touchstart, Touchmove and Touchend.

First touch events Touchstart, Touchmove and Touchend are iOS version safari browsers to convey some information to developers about newly added events. Because iOS devices have neither a mouse nor a keyboard, PC-side mouse and keyboard events are not enough to develop interactive Web pages for mobile Safari browsers.

When the iphone 3Gs was released, its own mobile Safari browser provided some new events related to touch operations. Subsequently, the browser on Android also implemented the same event. The touch event starts when the user's finger is on the screen, slides on the screen, or moves away from the screen. The following specific description:

　　Touchstart event: triggers when the finger touches the screen, even if a finger is already on the screen.
　　Touchmove Event: A continuous trigger when the finger slides on the screen. During this event, calling the Preventdefault () event can prevent scrolling.
　　touchend event: triggers when the finger is left on the screen.
　　Touchcancel Event: triggered when the system stops tracking the touch. The exact departure time for this event is not specified in the document, we can only guess.

All of these events will bubble up and can be canceled. Although these touch events are not defined in the DOM specification, they are implemented in a way that is compatible with DOM. Therefore, the event object for each touch event provides properties that are common in mouse practice: bubbles (type of bubbling event), cancelable (whether or not to use the Preventdefault () method to cancel the default action associated with the event), ClientX ( Returns when an event is triggered, the horizontal coordinates of the mouse pointer), ClientY (returns the vertical coordinates of the mouse pointer when an event is triggered), ScreenX (the 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 the common DOM properties, the touch event also contains the following three properties for tracking the touch.

　　touches: An array of touchscreen objects that represent the touch operations of the current trace.
　　targettouches: An array of touch objects that are specific to the event target.
　　changetouches: An array of touch objects that indicate what has changed since the last time it was touched.

　　Each Touch object contains the following attributes.

　　ClientX: The x-coordinate of the touch target in the viewport.
　　ClientY: The y-coordinate of the touch target in the viewport.
　　Identifier: identifies the unique ID of the touch.
　　Pagex: The x-coordinate of the touch target on the page.
　　Pagey: The y-coordinate of the touch target on the page.
　　ScreenX: The x-coordinate of the touch target in the screen.
　　ScreenY: The y-coordinate of the touch target in the screen.
　　Target : Touch-purpose DOM node destination.

The above property light so to see, it is very cumbersome, each attribute is so meticulous, only the real gun to a small example to understand more about the mystery. So the small example is as follows.

JavaScript code

Copy Code code 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.innerhtml = "Touch Started" ("+ Event.touches[0].clientx +", "+ Event.touches[0].clienty +") ";
Break
Case "Touchend":
oinp.innerhtml = "<br>touch End" ("+ Event.changedtouches[0].clientx +", "+ Event.changedtouches[0].clienty +") ";
Break
Case "Touchmove":
Event.preventdefault ();
oinp.innerhtml = "<br>touch Moved" ("+ Event.touches[0].clientx +", "+ Event.touches[0].clienty +") ";
Break
}

}
}
Window.addeventlistener (' Load ', load,false);

HTML code

Copy Code code as follows:

<div id= "INP" ></div>

The small example above. When the Touchstart event is triggered, the touch position is updated to the DIV tag. When the Touchmove event is triggered, the default behavior is scrolled (the default behavior of the touch Movement is scrolling the page), and then the change information of the touch operation is updated to the DIV tag. The Touchend event outputs final information about the touch operation. Note that when the Touchend event is triggered, there is no touch object in the touches collection because there is no active touching operation.

　　These events are triggered on all of the elements of the document, so that you can manipulate different parts of the page separately. In the touch of elements on the screen, these events (including mouse events) occur in the following order:

(1) Touchstart
(2) MouseOver
(3) MouseMove (once)
(4) MouseDown
(5) MouseUp
(6) Click
(7) Touchend

What about the compatibility of these touch events? Browsers that support touch events (Touchstart, Touchmove, and Touchend) are: iOS version safari, Android WebKit, bada version dolfin, os6+ Phantom browsers in the BlackBerry WebKit, Opera Mobile 10.1+, and LG proprietary OS. Currently only iOS version Safari supports multi-touch. PC version Firefox 6+ and Chrome also support touch events.

HTML5 actual combat and analysis of the touch events (Touchstart, Touchmove and Touchend) for you to introduce here, today mainly for you to introduce some browser-compatible support of the situation is also a good touch event. Hope to give you a reference, but also hope that we support the cloud-dwelling community.