Handling Touch Interactions
and Events
An essential part of any Web 2.0 application is the ability to respond to events triggered by the
user or by a condition that occurs on the client. The clicking of a button. The pressing of a key. The
scrolling of a window. While the user interacts with an HTML element, the entire document, or the
browser window, JavaScript serves as the watchful eye behind the scenes that monitors all of this
activity taking place and fires off events as they occur.
With its touch screen interface, iPhone is all about direct interactivity with the user. As a result,
you would expect any iPhone/iPod touch application you create to be able to handle the variety of
finger taps, flicks, swipes, and pinches that a user naturally performs as they interact with their
mobile device. However, because of the current capabilities of Mobile Safari browser, you have to
work with these interactions differently than what you might expect.
How iPhone Handles Events
When working with touch interactions and events for iPhone, keep in mind that the finger is not a
mouse. As a result, the traditional event model that Web developers are so used to working with
does not always apply in this new context. This is both good news and bad news for the applica-
tion developer. The good news is that much of the touch interaction that iPhone and iPod touch
are famous for is built right into Mobile Safari. As a result, you do not need to write any code to
handle the basic touch interactions of the user. Flick-scrolling, pinching and unpinching, and one-
finger scrolling are those sorts of user inputs that come for free. The bad news is that the developer
is greatly constrained in his or her ability to work with the full suite of JavaScript events and
override built-in behavior. As a result, certain user interactions that have become a staple to Web
developers now are impossible to utilize or require tricky, dumbed-down workarounds.
c05.indd 101c05.indd 101 12/7/07 2:47:02 PM12/7/07 2:47:02 PM
Chapter 5: Handling Touch Interactions and Events
102
The general rule of thumb for iPhone event handling is that no events trigger until the user’s finger
leaves the touch screen. The implications are significant:
❑
The
onmousedown
page. Additionally, when another page becomes the active page, JavaScript events (including polling
events created with
setInterval()
) are not fired. However, the
onunload
event of the
window
object is
triggered when the user loads a new page in the current window.
Table 5-1 lists the events that are fully supported and unsupported. Table 5-2 identifies the events that
are partially supported.
Supported events Unsupported events
formfield.onblur
document.onkeydown
formfield.onchange
document.onkeypress
formfield.onclick
document.onkeyup
formfield.onfocusformfield.onkeydown
form.onsubmit
formfield.onkeyup
formfield.ondblclick
formfield.onkeypress
formfield.onmouseenter
event handler of the
window
object. This event is
triggered each time the device is rotated by the user. The following code shows how to configure the
onorientationchange
event:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Orientation Change Example</title>
Event Level of support
document.onmousedown
Occurs after a
mouseup
event occurs but before
onmouseup
is fired
Table 5-2: Partially Supported JavaScript Events
Besides the anomaly of the timing of the
onmousedown
event, the rest of the supported mouse and key
events fire in Mobile Safari in the same sequence as a standard Web browser. Table 5-3 shows the event
sequences that occur when both a block level element and a form element are clicked. The form element
column also displays the order of key events if the user types in the on-screen keyboard.
Block-level elements (e.g., div) Form element (e.g., textarea, input)
onmouseover
onmouseover
user-scalable=0;”>
<script type=”application/x-javascript”>
function orientationChange() {
var str = “Orientation: “;
switch(window.orientation) {
case 0:
str += “Portrait”;
break;
case -90:
str += “Landscape (right, screen turned clockwise)”;
break;
case 90:
str += “Landscape (left, screen turned counterclockwise)”;
break;
case 180:
str += “Portrait (upside-down portrait)”;
break;
}
document.getElementById(“mode”).innerHTML = str;
}
</script>
</head>
<body onload=”orientationChange();” onorientationchange=”orientationChange();”>
<h4 id=”mode”>Ras sed nibh.</h4>
<p>
Donec semper lorem ac dolor ornare interdum. Praesent condimentum. Suspendisse
lacinia interdum augue. Nunc venenatis ipsum sed ligula. Aenean vitae lacus. Sed
However, note that the
onorientationchange
event is not triggered when the document loads.
Therefore, in order to evaluate the document orientation at this time, assign the
orientationChange()
function to the
onload
event.
While the
onorientationchange
event works great for iPhone 1.1.1 and later, earlier versions of
Mobile Safari did not support this event. Therefore, if you are designing an application that works on all
versions of Mobile Safari, you need to perform a workaround to emulate this functionality.
(continued)
c05.indd 104c05.indd 104 12/7/07 2:47:03 PM12/7/07 2:47:03 PM
Chapter 5: Handling Touch Interactions and Events
105
The
window.onresize
event handler would seem like a logical candidate to trap for an orientation
change. For example, consider the following code:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<head>
<title>On Resize</title>
<meta name=”viewport” content=”width=320; initial-scale=1.0; maximum-scale=1.0;
user-scalable=0;”>
onresize
.
A much better solution is to poll the browser for orientation changes using the
setInterval()
function.
Here’s a basic example:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Orientation Change Example #1</title>
<meta name=”viewport” content=”width=320; initial-scale=1.0; maximum-scale=1.0;
user-scalable=0;”>
<script type=”application/x-javascript”>
// add timer event
addEventListener(“load”, function() {
setTimeout(orientationChange, 0);
}, false);
var currentWidth = 0;
(continued)
c05.indd 105c05.indd 105 12/7/07 2:47:03 PM12/7/07 2:47:03 PM
Copyright: Tài liệu đại học ©