iPhone touch Test in Javascript Code
Everyone who owns an iPhone (or who has been holding out for an iPhone 3G) is bound to be excited about a lot of the new things the device can finally do, particularly the introduction of third-party applications. But those of us in the web development community have been itching for something further still: good web applications on the iPhone. This means we need a suitable replacement for mouse events. And boy did we get them! Though at first the APIs seem a little sketchy, once you’ve learned them you should be able to do amazing things in your application.
I’ll start with how to set up the iPhone console, since I found it invaluable while testing. Under Settings > Safari > Developer, you can turn it on or off. Simple log, error, and warn functions are provided (as part of the console object), all of which accept a single object.
My quest to understand the API led me to this Apple Developer Connection pagethat, while providing pretty thorough documentation about what’s available, left me a little confused about the details. Also, if you aren’t a member of ADC, trying to follow this link will leave you even more confused.
Clearing it Up
Apple introduced two new ideas with this API: touches and gestures. Touches are important for keeping track of how many fingers are on the screen, where they are, and what they’re doing. Gestures are important for determining what the user is doing when they have two fingers on the screen and are either pinching, pushing, or rotating them.
Touches
When you put a finger down on the screen, it kicks off the lifecycle of touch events. Each time a new finger touches the screen, a new touchstart event happens. As each finger lifts up, a touchend event happen. If, after touching the screen, you move any of your fingers around, touchmove events happen.
We have the following touch events:
- touchstart: Happens every time a finger is placed on the screen
- touchend: Happens every time a finger is removed from the screen
- touchmove: Happens as a finger already placed on the screen is moved across the screen
- touchcancel: The system can cancel events, but I’m not sure how this can happen. I thought it might happen when you receive something like an SMS during a drag, but I tested that with no success
Code:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<title>iPhone touch Test</title>
<meta content=”width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” />
<link rel=”apple-touch-icon” href=”images/icon.png” />
<head>
<script>
/******************************************************/
var touching, dPrevious, dCurrent, dNext, oX;
// Whether or not the finger is touching the screen
touching = false;
// Apple iPhone Touch API events
document.addEventListener(‘touchstart’, touchHandler, false);
document.addEventListener(‘touchmove’, touchHandler, false);
document.addEventListener(‘touchend’, touchHandler, false);
document.addEventListener(‘touchcancel’, touchHandler, false);
// The handler for all Apple iPhone Touch API events
function touchHandler(e) {
if (e.type == “touchstart”) {
alert(“Touch Start”);
}else if (e.type == “touchmove”) {
alert(“Touch Move”);
// If the user has removed the finger from the screen
}else if (e.type == “touchend” || e.type == “touchcancel”) {
alert(“touchend”);
}
}// funcation end
</script>
</head>
<body>
iPhone touch Test
</body>
</html>
Loading ...