HTML5 Touch Events (Touchstart, Touchmove, and Touchend)

1. Touchstart event: Triggers when the finger touches the screen, even if a finger is already placed on the screen.
2. Touchmove event: Triggers continuously when the finger is sliding on the screen. During this event, calling the Preventdefault () event can prevent scrolling.
3. Touchend event: Triggers when the finger is left on the screen.
4. 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; varOINP = 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);

Reprinted from: 78226044

HTML5 Touch Events (Touchstart, Touchmove, and Touchend)