ross boucher: iphone touch events
DESCRIPTION
This is a talk by Ross Boucher of 280 North about the basics of iPhone Touch Events and how to handle them on the iPhone, which is not trivial since they are different than simple onClick, and onMouse events web developers are used to.TRANSCRIPT
![Page 1: Ross Boucher: iPhone Touch Events](https://reader033.vdocument.in/reader033/viewer/2022051515/5563a645d8b42a01658b54e5/html5/thumbnails/1.jpg)
iPhone Touch Events in JavaScript
![Page 2: Ross Boucher: iPhone Touch Events](https://reader033.vdocument.in/reader033/viewer/2022051515/5563a645d8b42a01658b54e5/html5/thumbnails/2.jpg)
![Page 3: Ross Boucher: iPhone Touch Events](https://reader033.vdocument.in/reader033/viewer/2022051515/5563a645d8b42a01658b54e5/html5/thumbnails/3.jpg)
![Page 4: Ross Boucher: iPhone Touch Events](https://reader033.vdocument.in/reader033/viewer/2022051515/5563a645d8b42a01658b54e5/html5/thumbnails/4.jpg)
![Page 5: Ross Boucher: iPhone Touch Events](https://reader033.vdocument.in/reader033/viewer/2022051515/5563a645d8b42a01658b54e5/html5/thumbnails/5.jpg)
What's New? Touches
• touchstart • touchend • touchmove • touchcancel
Gestures • gesturestart • gesturechange • gestureend
![Page 6: Ross Boucher: iPhone Touch Events](https://reader033.vdocument.in/reader033/viewer/2022051515/5563a645d8b42a01658b54e5/html5/thumbnails/6.jpg)
Touches
![Page 7: Ross Boucher: iPhone Touch Events](https://reader033.vdocument.in/reader033/viewer/2022051515/5563a645d8b42a01658b54e5/html5/thumbnails/7.jpg)
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
![Page 8: Ross Boucher: iPhone Touch Events](https://reader033.vdocument.in/reader033/viewer/2022051515/5563a645d8b42a01658b54e5/html5/thumbnails/8.jpg)
"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)
![Page 9: Ross Boucher: iPhone Touch Events](https://reader033.vdocument.in/reader033/viewer/2022051515/5563a645d8b42a01658b54e5/html5/thumbnails/9.jpg)
What Can We Do? • Light-Table style interactions
• Scale • Rotate • Drag • ...
• What about existing code?
![Page 10: Ross Boucher: iPhone Touch Events](https://reader033.vdocument.in/reader033/viewer/2022051515/5563a645d8b42a01658b54e5/html5/thumbnails/10.jpg)
Simulating Mouse Events • mousedown - easy
• mouseup - easy
• mousemove - slightly more complex
• mouseover, mouseout - nope
![Page 11: Ross Boucher: iPhone Touch Events](https://reader033.vdocument.in/reader033/viewer/2022051515/5563a645d8b42a01658b54e5/html5/thumbnails/11.jpg)
jQuery Drag & Drop
![Page 12: Ross Boucher: iPhone Touch Events](https://reader033.vdocument.in/reader033/viewer/2022051515/5563a645d8b42a01658b54e5/html5/thumbnails/12.jpg)
Gestures
![Page 13: Ross Boucher: iPhone Touch Events](https://reader033.vdocument.in/reader033/viewer/2022051515/5563a645d8b42a01658b54e5/html5/thumbnails/13.jpg)
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
![Page 14: Ross Boucher: iPhone Touch Events](https://reader033.vdocument.in/reader033/viewer/2022051515/5563a645d8b42a01658b54e5/html5/thumbnails/14.jpg)
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)
![Page 15: Ross Boucher: iPhone Touch Events](https://reader033.vdocument.in/reader033/viewer/2022051515/5563a645d8b42a01658b54e5/html5/thumbnails/15.jpg)
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)
![Page 16: Ross Boucher: iPhone Touch Events](https://reader033.vdocument.in/reader033/viewer/2022051515/5563a645d8b42a01658b54e5/html5/thumbnails/16.jpg)
Questions? [email protected]