H5 and Anatomy of touch events (Touchstart, Touchmove and Touchend)

HTML5 New 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 good events, and later with the compatibility of the promotion after the addition of sharing. The events today are mainly touch events: Touchstart, Touchmove and Touchend.

The first touch events Touchstart, Touchmove, and Touchend are the iOS version of the Safari browser in order to communicate some information to the developer about the newly added event. Because iOS devices have neither a mouse nor a keyboard, the PC-side mouse and keyboard events are not enough when developing 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. Touch events start when the user's finger is on the screen, when it slides on the screen, or when it's removed from the screen. The following are specific instructions:

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

Touchmove event: Triggers continuously when the finger is sliding 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 touch. The exact departure time for this event is not specified in the documentation, and 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 the DOM. So, the event object for each touch event provides properties that are common in mouse practice: bubbles (the type of bubbling event), cancelable (whether the Preventdefault () method can be used 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 (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, touch events also contain the following three properties for tracking touch.

Touches: Represents an array of touch objects that are currently tracked by touching operations.

Targettouches: An array of touch objects that are 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 attributes.

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

ClientY: Touch the y-coordinate of the target in the viewport.

Identifier: Identifies the unique ID of 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: Touch the destination DOM node targets.

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

JavaScript code

123456789101112131415161718192021222324252627

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 + ")"; nbsp;               break;          }             }} Window.addeventlistener (' Load ', load,false);

HTML code

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

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

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

(1) Touchstart

(2) MouseOver

(3) MouseMove (one time)

(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 Safari, Android version webkit, bada version dolfin, os6+ Phantom browser in BlackBerry WebKit, Opera Mobile 10.1+ and LG proprietary OS. Currently only the iOS version of Safari supports multi-touch. The PC version of Firefox 6+ and Chrome also supports touch events.

HTML5 actual combat and analysis of the touch events (Touchstart, Touchmove and Touchend) for everyone to introduce here, today mainly for the introduction of some browser-compatible support of the situation is also good touch events. If there are good events in the future, then continue the introduction. For more information about HTML5 combat and analysis, please pay attention to the related updates of Dream Dragon Station.

H5 and Anatomy of touch events (Touchstart, Touchmove and Touchend)