Date post: | 26-May-2015 |
Category: |
Technology |
Upload: | sanfrancisco-javascriptmeetup |
View: | 3,902 times |
Download: | 3 times |
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? [email protected]