JavaScript event (ix) event type touch and gesture events

First, touch events

• Touchstart: Triggered when the finger touches the screen, even if a finger has been placed on the screen.
• Touchmove: Triggers continuously when the finger is sliding on the screen. During this world, calling Preventdefault () can prevent scrolling.
• Touchend: Triggers when the finger moves off the screen.
• Touchcancel: Triggered when the system stops tracking touch. The exact trigger time for this event is not explicitly stated in the documentation.

The above events will be bubbling 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. Therefore, the event object for each touch event provides the properties that are common in mouse events: Bubbles,cancelable,view,clientx,clienty,screenx,screeny,detail,altkey,shiftkey , Ctrlkey and Metakey.

In addition to the common DOM properties, the Touch World also contains 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.
• Changedtouches: An array of touch objects that represent what has changed since the last touch of the word.

Each Touch object contains the following properties:

• 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 DOM node destination.

Use these properties to track user touch actions on the screen.

<id= "Output"></div>

functionHandlertouchevent (event) {//track only One Touch    if(Event.touches.length==1 | |event.touches.length==0) {//The book is wrong here varOutput=document.getelementbyid ("Output"); Switch(event.type) { Case"Touchstart": output.innerhtml= "Touch Started" ("+event.touches[0].clientx+", "+event.touches[0].clienty+") ";  Break;  Case"Touchend": output.innerhtml+ = "<br/>touch ended (" +event.changedtouches[0].clientx+ "," +event.changedtouches[0].clienty+ ")";  Break;  Case"Touchmove": Event.preventdefault ();//Prevent scrollingoutput.innerhtml+= "<br/>touch moved (" +event.changedtouches[0].clientx+ "," +event.changedtouches[0].clienty +")"; }}}eventutil.addhandler (document,"Touchstart", handlertouchevent); Eventutil.addhandler (document,"Touchend", handlertouchevent); Eventutil.addhandler (document,"Touchmove", handlertouchevent);

The above code tracks a touch operation that occurs on the screen. For simplicity, the information is only output if there is an active touch operation.

When the Touchstart event occurs, the location information of the touch is output to the <div> element.

When the Touchmove event occurs, it cancels its default behavior, prevents scrolling (the default behavior of the touch move is scrolling the page), and then outputs the change information for the touch operation.

The touched event, in turn, outputs the final information about the touch operation.

Note : When the touched event occurs, there is no touch object in the touches collection because there is no active touch operation, and you must instead use the Changedtouches collection.

/* when there is no problem when triggering the Touchstart and Touchmove events, the program can correctly enter the if  and execute the corresponding statement according to the case, but when the Touchend event is triggered, Event.touches.length is already equal to 0, can not enter if, can not execute the statement in case, so trigger touchend will never execute the program. So the judging condition should add event.touches.length==0. */

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

• Touchstart
• MouseOver
• MouseMove (one time)
• MouseDown
• MouseUp
• Click
• Touched

The desktop version of Firefox 6+ and Chrome also supports touch events.

2. Gesture Events

Gestures are generated when two fingers touch the screen, and gestures usually change the size of the display or rotate the display. There are three gesture events, as follows:

• Gesturestart: Triggered when one finger has been pressed on the screen while the other finger touches the screen.
• Gesturechange: triggered when the position of any finger on the touch screen changes.
• Gestureend: Triggers when any one finger moves away from the screen.

These events are triggered only when two fingers touch the receiving container of the event.

Setting an event handler on an element means that two fingers must be in the range of the element at the same time to trigger a gesture event (this element is the target).

Because these events are bubbling, the event handlers are placed on the document and can handle all gesture events.

At this point, the target of the event is the element that is within its range, even if two fingers are present.

Touch event and gesture event relationships:

The event object for each of the gesture events contains the standard mouse event properties: Bubbles,cancelable,view,clientx,clienty,screenx,screeny,detail,altkey,shiftkey, Ctrlkey and Metakey. In addition, there are two additional attributes: rotation and scale.

• Rotation property: Indicates the rotation angle caused by a change in the finger, negative values are rotated counterclockwise, and positive values indicate clockwise rotation (the value starts at 0).
• Scale attribute: Represents the change in distance between two fingers (for example, inward contraction shortens distance); This value starts at 1 and increases with distance and decreases with distance.

Example:

functionHandlegestureevent (event) {varOutput=document.getelementbyid ("Output"); Switch(event.type) { Case"Gesturestart": output.innerhtml= "Gesture started (" +event.ratation+ ", scale" +event.scale+ ")";  Break;  Case"Gestureend": output.innerhtml+ = "<br/>gesture ended (" +event.rotation+ ", scale" +event.scale+ ")";  Break;  Case"Gesturechange": Event.preventdefault ();//Prevent scrollingoutput.innerhtml+= "<br/>gesture changed (" +event.rotation+ ", scale" +event.scale+ ")"; }}eventutil.addhandler (document,"Gesturestart", handlegestureevent); Eventutil.addhandler (document,"Gestureend", handlegestureevent); Eventutil.addhandler (document,"Gesturechange", handlegestureevent);

Extended reading:

JavaScript event (one) event flow

JavaScript event (ii) event handlers

JavaScript event (iii) Event object

JavaScript events (iv) Public members of event (properties and methods)

JavaScript event (v) Event type mouse event

JavaScript event (vi) Event Type wheel Event

JavaScript event (vii) Event type keyboard and text events

JavaScript event (eight) event type Change Event

The author starof, because the knowledge itself in the change, the author is also constantly learning and growth, the content of the article is not updated regularly, in order to avoid misleading readers, convenient tracing, please reprint annotated source: http://www.cnblogs.com/starof/p/6560807. HTML has a problem welcome to discuss with me, common progress.

JavaScript event (ix) event type touch and gesture events