Touch events for mobile internet terminals, Touchstart, Touchend, Touchmove

Source: http://www.css119.com/archives/1629

Mobile devices such as smartphones and tablets 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 iOS also supports traditional interactive events like Click and MouseOver, but it's 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.

There are three basic touch events that are listed in the specification and have been 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:

<div id= "Canvas" ></div>

Define the event handler for Touchstart and bind the event:

var canvas = document.getElementById ("Canvas"), Spirit, StartX, Starty;function Touchstart (event) {//block page default action    (ie Web page scrolling) event.preventdefault ();    if (Spirit | |!event.touches.length) return;    var touch = 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:

function TouchMove (event) {Event.preventdefault ();    if (!spirit | |!event.touches.length) return;    var touch = 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 offset of x position 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) {if (!spirit) return;    Canvas.removechild (spirit); Spirit = NULL;} Canvas.addeventlistener ("Touchend", Touchend, false);

Test the above code on your ipad or iphone. If not unexpected, a complete multi-touch Web program is born.
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.
Developer Tools
In mobile development, it is easier to start prototyping on the desktop and then process the mobile-specific parts on the devices that you intend to support. Multi-Touch is one of those features that is difficult to test on a PC because most PCs do not have touch input.

Testing that has to be done on a mobile device may lengthen your development cycle, because every change you make requires that the code be submitted to the server and then loaded onto the device. Then, once run, there's not much debugging on the app, because tablets and smartphones lack the tools that Web developers use.

One solution to this problem is to simulate triggering events on the development machine. For single touch, touch events can be simulated based on mouse events. If you have a touch input device, such as a modern app MacBook, then multi-touch can also be simulated.

Single Touch events

If you want to simulate a single touch event on your desktop, try Phantom Limb, which simulates touch events on a Web page and provides a giant hand to guide it.

There's also touchable, a jquery plugin that unifies touch and mouse events across platforms.

Multi-Touch events

To make your multi-touch web app work on your browser or multi-touch trackpad (like Apple MacBook or Magicpad), I created this magictouch.js fill tool that captures touch events from the trackpad, They are then converted to standard-compatible touch events.

1. Download the nptuioclient Npapi plugin and install it into the ~/library/internet plug-ins/directory.

2. Download the Tongseng Tuio app for this Mac Magicpad and start the server.

3. Download the magictouch.js JavaScript Library to emulate the specification-compliant touch events based on the Nptuioclient callback.

Introduction to Touch Event we donuts, here to recommend two documents:

Safari dom Additions reference:http://developer.apple.com/library/safari/#documentation/appleapplications/ Reference/safarijsref/intro/intro.html#//apple_ref/doc/uid/tp40001482-ch2g-bajdajag

Safari Web Content Guide:

http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/ Introduction/introduction.html

For programmers interested in developing multi-touch Web applications, Apple's developer site is a place that should be frequented.

A simple example of what I do:
Http://www.css119.com/demo/touchmove.html

Touch events for mobile internet terminals, Touchstart, Touchend, Touchmove