Peter Lubbers - Pro HTML 5 Programming

CHAPTER 11 ■ THE FUTURE OF HTML5
During the gesture, the event handler is free to check the rotation and scale properties of the
corresponding event and update the display accordingly. Listing 11-1 shows an example usage of the
gesture handlers.
Listing 11-1. Example Gesture Handler
function gestureChange(event) {
// Retrieve the amount of change in scale caused by the user gesture
// Consider a value of 1.0 to represent the original size, while smaller
// numbers represent a zoom in and larger numbers represent a zoom
// out, based on the ratio of the scale value
var scale = event.scale;
// Retrieve the amount of change in rotation caused by the user gesture
// The rotation value is in degrees from 0 to 360, where positive values
// indicate a rotation clockwise and negative values indicate a counter-
// clockwise rotation
var rotation = event.rotation;
// Update the display based on the rotation.
}
// register our gesture change listener on a document node
node.addEventListener("gesturechange", gestureChange, false);
Gesture events are particularly appropriate in applications that need to manipulate objects or
displays, such as in diagramming tools or navigation tools.
Touches
For those cases where you need low-level control over device events, the touch events provide as much
information as you will likely need. Table 11-3 shows the different touch events.
Table 11-3. Touch Events
Event Handler Description
ontouchstart A finger has been placed on the surface of the touch device. Multitouch events will
occur as more fingers are placed on the device.
ontouchmove One or more of the fingers on the device has moved its location in a drag operation.
ontouchend One or more fingers have been lifted away from the device screen.
ontouchcancel An unexpected interruption has stopped the touch operations.
265