javascript

Chapter 12: Events
These properties can be used to track the touch around the screen. For example:
function handleTouchEvent(event){
//only for one touch
if (event.touches.length == 1)
}
}
var output = 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 scrolling
output.innerHTML += “ < br > Touch moved (“ +
event.changedTouches[0].clientX + “,” +
event.changedTouches[0].clientY + “)”;
break;
}
EventUtil.addHandler(document, “touchstart”, handleTouchEvent);
EventUtil.addHandler(document, “touchend”, handleTouchEvent);
EventUtil.addHandler(document, “touchmove”, handleTouchEvent);
This code tracks a single touch around the screen. To keep things simple, it outputs information only
when there ’ s a single active touch. When the touchstart event occurs, it outputs the location of the
touch into a < div > . When a touchmove event fires, its default behavior is canceled to prevent scrolling
(moving touches typically scroll the page) and then it outputs information about the changed touch.
The touchend event outputs the last information about the touch. Note that there is nothing in the
touches collection during the touchend event because there is no longer an active touch; the
changedTouches collection must be used instead.
These events fire on all elements of the document, so you can manipulate different parts of the page
individually.
Gesture Events
The iPhone 2.0 version of Safari also introduced a class of events for gestures. A gesture occurs when two
fingers are touching the screen and typically causes a change in the scale of the displayed item or the
rotation. There are three gesture events, as described here:
420
❑
❑
❑
gesturestart — Fires when a finger is already on the screen and another finger is placed on
the screen
gesturechange — Fires when the position of either finger on the screen has changed
gestureend — Fires when one of the fingers has been removed from the screen