Mobile Internet terminal Touch event, Touchstart, Touchend, Touchmove great article

reproduced Please specify: reproduced from the Web front-end development (www.css119.com)-focus on common web front-end development issues, the latest web front-end development technology (WebApp Development, mobile site development), The best web front-end development tool and the most comprehensive web front-end development W3cschool Manual

This article link address: Web front-end development (www.css119.com) – Touch events for mobile internet terminals, Touchstart, Touchend, Touchmove

mobile phones and Tablet PCs Mobile devices typically have a capacitive touchscreen (capacitive touch-sensitive screen) to capture the interaction of the user's finger. With the development of mobile networks, which can support more and more complex applications, web developers need a way to handle these events. For example, almost all fast-paced games require the player to press multiple buttons at once, in this way, in the case of a touchscreen, meaning multi-touch. Apple introduced touch event api,android in iOS 2.0 and is catching up to this fact standard to narrow the gap. A recent work group is working together to develop this touch event specification. Safari on the

iOS also supports traditional interactive events such as Click and MouseOver, but it is not recommended to use Click and mouseover on iOS browser apps because these two events are designed to support mouse clicks. The Click event has a delay of about half a second on iOS because iOS wants to highlight the element that receives the click. Events such as Mouseover/out are triggered by the click of a finger. Therefore, on iOS, you should discard the traditional interactive event model and accept a new event model. Touch events and more advanced gesture events allow your Web pages to interact like native apps.

Three types are listed in the specification and get basic touch events that are widely implemented across mobile devices:

1. Touchstart: Place your finger on a DOM element.
2. touchmove: Drag a DOM element with your finger.
3. touchend: Move the finger away from a DOM element.

Each touch event includes three touch lists:

1. Touches: A list of all the fingers that are currently on the screen.
2. Targettouches: A list of the fingers that are located on the current DOM element.
3. Changedtouches: A list of fingers that involve the current event.

For example, in a touchend event, this would be a moving finger.

These lists consist of objects that contain touch information:

1. Identifier: A numeric value that uniquely identifies the current finger in a touch session.
2. The Target:dom element is the target of the action.
3. Client/page/screen coordinates: The position where the action takes place on the screen.
4. Radius coordinates and RotationAngle: Draw an ellipse roughly equivalent to the shape of a finger.

Before you begin to describe the touch event, you need to describe a touch object that is unique to a multi-touch system (Android and iOS, and even Nokia's newest Meego system simulates a similar object, only for iOS, because I only have the ipad available for testing. ）。 This object encapsulates a screen touch, usually from a finger. It is generated when the touch event is triggered and can be picked up by the event object of the touch events handler (typically via the Event.changedtouches property). This object includes some important attributes:

Client/clienty: The location of the touch point relative to the browser window viewport

Pagex/pagey: The position of the touch point relative to the page

Screenx/screeny: The position of the touch point relative to the screen

Unique ID of the Identifier:touch object

We start the world of multi-touch web pages from an instance touched by a single finger. When a finger is lowered, a block appears on the screen, and the finger moves the block as it moves, and the finger mentions the block disappears. First, let's define the CSS for the Block :

*{margin:0;padding:0}html,body{height:100%}.spirit{position:absolute;width:50px;height:50px;background-color: Red;} #canvas {position:relative;width:100%;height:200px;background-color: #ccc}

Then, under body, define a container to receive the event:

<id= "Canvas"></div>

Define the event handler for Touchstart and bind the event:

varCanvas = document.getElementById ("Canvas"), Spirit, StartX, starty;functionTouchstart (event) {//Block page Default actions (that is, Web page scrolling)Event.preventdefault (); if(Spirit | |!event.touches.length)return; varTouch = Event.touches[0]; StartX=Touch.pagex; Starty=Touch.pagey; Spirit= Document.createelement ("div");    Canvas.appendchild (spirit); Spirit.classname= "Spirit"; Spirit.style.left= StartX + "px"; Spirit.style.top= Starty + "px";} Canvas.addeventlistener ("Touchstart", Touchstart,false);

First, we'll use the block spirit as a global object, because we're going to test a single finger now so it's better to have only one object on the screen moving (and so on with a multi-touch instance). In Touchstart this event handler, we also first determine whether a spirit has been generated, that is, whether a finger has been placed on the screen, and if so, return directly.

Like the traditional event listener, a multi-touch system produces an event object, except that the object has more properties, such as the event.touches here, which gets all the touch on the screen. Notice here the Event.preventdefault (), in the traditional event handler, this method blocks the default action of the event, the default action of the touch event is the scroll screen, we do not want the screen to move around, so call this function first. Let's take the first touch and pagex/y it as the initial position when the spirit was created. Next, we create a div and set classname,left,top three properties. Finally, we appendchild the Spirit object into the container. So, when the first finger is down, a red, 50px square block is placed on the screen.

Then, we're going to start processing the events that the finger moves on the screen:

functionTouchMove (Event) {Event.preventdefault (); if(!spirit | |!event.touches.length)return; varTouch = Event.touches[0], x= Touch.pagex-StartX, y= Touch.pagey-Starty; //This is for the finger must be horizontal scrolling, the principle is to calculate the X position offset is greater than the offset of y    if(Math.Abs (x) >Math.Abs (y)) {Spirit.style.left= Touch.pagex + "px"; Spirit.style.top= Touch.pagey + "px"; }}canvas.addeventlistener ("Touchmove", Touchmove,false);

In touch move listener, we use WebKit-specific CSS properties: Webkittransform to move the block, this property specifically how to use Google. It is recommended to use WebKit's own features when constructing Web pages for iOS devices, not only to dazzle, but also to use hardware directly to improve performance.

Finally, we handle the Touchend event. When the finger is lifted, the block is removed from the screen.

function Touchend (event) {    ifreturn;    Canvas.removechild (spirit);     NULL ;} Canvas.addeventlistener (false);

Device Support
Unfortunately, the implementation of touch events varies greatly in terms of completeness and quality. I have written a diagnostic script to show some basic information about the touch API implementation, including which events are supported, and the Touchmove event-triggered solution. I tested Android 2.3.3 on Nexus One and Nexus S hardware, tested Android 3.0.1 on the Xoom, and tested iOS 4.2 on ipad and iphone.

In short, all tested browsers support Touchstart, Touchend, and Touchmove events.

The specification provides an additional three touch events, but the browser being tested does not support them:

1. Touchenter: Move the finger into a DOM element.
2. Toucheleave: Move your finger away from a DOM element.
3. Touchcancel: Touch interrupted (Implementation specification).

The tested browser also provides a list of touches, targettouches, and changedtouches within each touch list. However, the browser being tested does not support RADIUSX, RadiusY, or RotationAngle properties, which indicate the shape of the finger touching the screen. During a touchmove, the event is triggered about 60 times a second, as is the case with all the tested devices.

Mobile Internet terminal Touch event, Touchstart, Touchend, Touchmove great article