HTML5 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.

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); 

　　

Make a little change to the above code, you can determine the direction of the horizontal direction of the slide, and then left the corresponding action, 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 (' from 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+minrange<clientx_end) {this.direction= ' ltr ';                } else if (this.clientx_start-minrange>clientx_end) {this.direction= ' RTL '; }Break }}} window.addeventlistener (' Load ', load, false);

　　

HTML5 Touch Events (Touchstart, Touchmove, and Touchend) (RPM)