iPhone Touch Events in JavaScript

What's New? Touches

• touchstart • touchend • touchmove • touchcancel

Gestures • gesturestart • gesturechange • gestureend

Touches

Three Arrays:

• touches: Every finger touching the screen

• targetTouches: All touches that originated in the same target node

• changedTouches: Only touches that are involved in the current event callback

New Event Properties

"Touch Object" Properties • clientX & clientY: relative to the viewport

(doesn't include scroll offset)

• screenX & screenY: relative to the screen

• pageX & pageY: relative to the page (includes scroll offset)

• target: DOM Element the touch started on

• identifier: integer identifier, "unique" per touch (ranges from 1 to 9, only unique per event cycle)

What Can We Do? • Light-Table style interactions

• Scale • Rotate • Drag • ...

• What about existing code?

Simulating Mouse Events • mousedown - easy

• mouseup - easy

• mousemove - slightly more complex

• mouseover, mouseout - nope

jQuery Drag & Drop

Gestures

What's the Deal? Slightly easier to deal with:

• no managing of touches/fingers

• scale and rotation calculated for you (event.scale & event.rotation)

• only fires for two fingers

• both fingers must be on the DOM node

Helpful Hints

• Set a Viewport width=device-width, minimum-scale=1.0, maximum-scale=1.0;

• Developer Console (Settings > Safari > Developer)

• Sometimes Unstable (not too bad though, just force quit)

Resources • http://tlrobinson.net/blog/?p=42

• http://www.sitepen.com/blog/2008/07/10/touching -and-gesturing-on-the-iphone/

• http://developer.apple.com/webapps/ (registration required)

• http://rossboucher.com/iphone/

• http://threedubmedia.blogspot.com/2008/08/ eventspecialdrop.html (jQuery drag & drop)

Questions? ross@280north.com