Mobblestouch — W3C Touch Events and gestures

Presentation at Mr Mobbles Magical Emporium 10/2011

http://pornel.net/mobbles

Transcript

1. Mobblestouch
2. www.w3.org/TR/touch-events
3. Microsoft http://blogs.msdn.com/b/ie/archive/2011/10/19/ handling-multi-touch-and-mouse-input-in-all-browsers.aspx
4. mousedown = mousemove = mouseup = touchstart touchmove touchend
5. mouseover mouseout :hover
6. click
7. element.ontouchstart = function(event){…} element.addEventListener (‘touchstart’,…,…)
8. TouchEvent interface event.touches = […] event.chagedTouches = […]
9. TouchEvent interface event.pageX → event.touches[i].pageX event.target → event.touches[i].target event.targetTouches
10. Touch interface touch.pageY/touch.pageX touch.target touch.identifier
11. Div 1 Div 2 Div 3 mousedown mousemove mouseup
12. Div 1 Div 2 Div 3 touchstart touchmove touchend
13. Tap and… ontouchstart = function() { timer = setTimeout(hold, 1000) } ontouchend = function() { clearTimeout(timer) if (!held) tap() } var timer; …hold!
14. Hold on! ontouchstart = function(e) { if (e.touches.length > 1) return; clearTimeout(timer) timer = setTimeout(hold, 1000) e.preventDefault() }
15. call event.preventDefault()
16. body.ontouchmove = function(e) {e.preventDefault()}
17. :active trick body.ontouchmove = function(){}
18. gesturestart gestureend
19. 1 2 Math.sqrt( (x1-x2)*(x1-x2) + (y1-y2)*(y1-y2) )
20. Zoom moves!
21. Math.atan2( (x-x),(y-y) )
22. Math.TAU = 2*Math.PI Math.atan2(…)/Math.TAU*360+180
23. Beware of CSS transforms order!
24. Swipe Slow = peek Fast = switch
25. Swipe event.timestamp
26. Device ✌ ✌ 2.x ” 3.x ✌ ? Emulator ✌ ” ” None
27. Alt Alt + Shift
28. Phantom limb vodori.com/blog/phantom-limb.html
29. @media all and (-moz-touch-enabled:1) {…} if (ontouchstart in window) {…} document.body.ontouchstart = function() { touch_enabled = true; } Detection
30. Trackpad ≠ Multitouch MozSwipeGesture XUL only MozMousePixelScroll onscroll event.wheelDeltaX/Y
31. @pornelski Image credits: Flickr—Vectorportal http://www.flickr.com/photos/ vectorportal, Flickr—Peter Kaminski http://flickr.com/people/peterkaminski, Denis-Carl http://www.deniscarl.com, Failblog.com and Dailysquee.com. Presented at: Mr Mobbles Magical Emporium 10/2011