patrick h. lauke - getting touchy; an introduction to touch and pointer events

Download Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events

Post on 13-May-2015

216 views

Category:

Software

0 download

Embed Size (px)

DESCRIPTION

Beyond smartphones and tablets, touchscreens are finding their way into laptops and even desktop computers. With hardware support for touch becoming increasingly ubiquitous, it's time to explore what new possibilities are available to developers. This session will cover the basics of handling touch events - from making sure simple single-tap interactions are as responsive as possible, all the way to full multitouch, gesture-enabled, cross-browser interface elements.

TRANSCRIPT

  • 1.gettingtouchy AN INTRODUCTION TO TOUCH AND POINTER EVENTS Patrick H. Lauke / DevConFu / Jrmala, Latvia / 29 May 2014

2. patrickhlauke.github.io/touch 3. Touch/pointer events test results 4. how can I make my website work on touch devices? 5. you don't need touch events browsers emulate regular mouse events 6. patrickhlauke.github.io/touch/tests/event-listener_mouse-only.html 7. patrickhlauke.github.io/touch/tests/event-listener_mouse-only.html 8. compatibility mouse events (mouseenter) > mouseover > mousemove* > mousedown > (focus) > mouseup > click * only a single sacrificial mousemove event fired 9. on first tap (mouseenter) > mouseover > mousemove > mousedown > (focus) > mouseup > click subsequent taps mousemove > mousedown > mouseup > click tapping away mouseout > (blur) focus / blur only on focusable elements in Firefox mouseout not on iOS Safari/WebView (e.g. iOS Chrome) Opera Mobile and 10. emulation works, but is limiting/problematic 11. 1. delayed event dispatch 2. mousemove doesn't track 12. 1. delayed event dispatch 2. mousemove doesn't track 13. patrickhlauke.github.io/touch/tests/event-listener_show-delay.html 14. patrickhlauke.github.io/touch/tests/event-listener_show-delay.html 15. 1. delayed event dispatch 2. mousemove doesn't track 16. patrickhlauke.github.io/touch/particle/2 17. patrickhlauke.github.io/touch/particle/2 (iOS7 bug: moving finger fires mousemove on scroll) 18. we need to go deeper... 19. touch events introduced by Apple, adopted in Chrome/Firefox/Opera www.w3.org/TR/touch-events 20. touchstart touchmove touchend touchcancel touchenter touchleave 21. patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html 22. patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html Bug 128534 - 'mouseenter' mouse compat event not fired... 23. events fired on tap touchstart > [touchmove]+ > touchend > (mouseenter) > mouseover > mousemove > mousedown > (focus) > mouseup > click (mouse events only fired for single-finger tap) 24. on first tap touchstart > [touchmove]+ > touchend > (mouseenter) > mouseover > mousemove > mousedown > (focus) > mouseup > click subsequent taps touchstart > [touchmove]+ > touchend > mousemove > mousedown > mouseup > click tapping away mouseout > (mouseleave) > (blur) 25. too many touchmove events prevent mouse compatibility events after touchend (not considered a "clean" tap) too many touchmove events on activatable elements can lead to touchcancel (in old Chrome/Browser versions) not all browsers consistently send the touchmove some browsers outright weird... 26. Browser/Android 4.3 (AppleWebKit/534.30) mouseover > mousemove > touchstart > touchend > mousedown > mouseup > click Browser/Blackberry PlayBook 2.0 (AppleWebKit/536.2) touchstart > mouseover > mousemove > mousedown > touchend > mouseup > click 27. Touch/pointer events test results 28. touch events vs limitations/problems 29. 1. delayed event dispatch 2. mousemove doesn't track 30. 1. delayed event dispatch 2. mousemove doesn't track 31. patrickhlauke.github.io/touch/tests/event-listener_show-delay.html 32. why the delay? double-tap to zoom (mostly anyway) 33. what if browsers didn't wait? 34. Puffin/Android double-tap zooms and fires mouse events + click (also, doesn't support touch events) 35. Try it out in Chrome? chrome://flags/ 36. when does the delay happen? 37. patrickhlauke.github.io/touch/tests/event-listener.html 38. touch / mouse events delay touchstart > [touchmove]+ > touchend > [300ms delay] (mouseenter) > mouseover > mousemove > mousedown > (focus) > mouseup > click 39. how can we make it feel responsive like a native app? 40. react to events fired before the 300ms delay... 41. touchstart for an immediate control (fire/jump button on a game) 42. touchend for a control that fires after finger lifted 43. interlude: simple feature detection for touch events 44. /* feature detection for touch events */ if ( 'ontouchstart' in window ) { /* some clever stuff here */ } /* older browsers have flaky support so more hacky tests needed...use Modernizr.touch or similar */ 45. /* common performance trick */ var clickEvent = ( 'ontouchstart' in window ? 'touchend' : 'click' ); blah.addEventListener( clickEvent , function() { ... }, false); 46. don't make it touch-exclusive 47. /* common performance trick */ var clickEvent = ( 'ontouchstart' in window ? 'touchend' : 'click'); ... /* if touch events are supported, only listen to touchend, not click */ 48. hybrid devices touch + mouse + keyboard 49. Android + mouse behaves like touch touchstart > touchend > mouseover > mousemove > mousedown > (focus) > mouseup > click 50. Blackberry PlayBook 2.0 + mouse - like desktop mouse mouseover > mousedown > mousemove > mouseup > click 51. Android + keyboard like desktop keyboard focus > click 52. iOS + VoiceOver (with/without keyboard) similar to touch focus > touchstart > touchend > (mouseenter) > mouseover > mousemove > mousedown > blur > mouseup > click 53. Android + TalkBack keyboard/mouse hybrid focus > blur > mousedown > mouseup > click > focus(?) 54. hacks.mozilla.org - Detecting touch [...] 55. /* feature detection for touch events */ if ('ontouchstart' in window) { /* browser supports touch events but user is not necessarily using touch (exclusively) */ /* it could be a mobile, tablet, desktop, fridge ... */ } 56. touch or mouse or keyboard 57. touch and mouse and keyboard 58. /* doubled-up event listeners */ foo.addEventListener(' touchend ', someFunction, false); foo.addEventListener(' click ', someFunction, false); 59. /* prevent delay + mouse events */ foo.addEventListener(' touchstart ', function(e) { e.preventDefault(); }, false); /* doubled-up event listeners */ foo.addEventListener('touchend', someFunction, false); foo.addEventListener('click', someFunction, false); 60. preventDefault() kills scrolling, pinch/zoom, etc 61. apply preventDefault() carefully (just on buttons/links, not entire page) 62. github.com/ftlabs/fastclick 63. browsers working to remove double-tap to zoom delay (when page not zoomable) 64. patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html 65. patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html 66. ... content="minimum-scale=1, maximum-scale=1" patrickhlauke.github.io/touch/tests/event-listener_minimum-maximum-scale.html 67. ... content="minimum-scale=1, maximum-scale=1" patrickhlauke.github.io/touch/tests/event-listener_minimum-maximum-scale.html 68. Bug 922896 - Optimizations to remove 300ms [...] delay [RESOLVED - FIXED] 69. what about accessibility? 70. patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html 71. Chrome 32+ / Android: ... content="width=device-width" updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away 72. Bug 941995 - Remove 300ms [...] on "responsive" pages 73. patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html 74. iOS/Safari designed themselves into a corner: double-tap to scroll bugs.webkit.org/show_bug.cgi?id=122212 75. 1. delayed event dispatch 2. mousemove doesn't track 76. patrickhlauke.github.io/touch/particle/2 77. patrickhlauke.github.io/touch/particle/2 (iOS7 bug: moving finger fires mousemove on scroll) 78. events fired on tap touchstart > [touchmove]+ > touchend > (mouseenter) > mouseover > mousemove* > mousedown > (focus) > mouseup > click * mouse event emulation fires only a single mousemove too many touchmove events prevent mouse compatibility events after touchend 79. doubling up handling of mousemove and touchmove 80. var posX, posY; ... function positionHandler(e) { posX = e.clientX ; posY = e.clientY ; } ... canvas.addEventListener(' mousemove ', positionHandler, false); 81. var posX, posY; ... function positionHandler(e) { /* handle both mouse and touch */ } ... canvas.addEventListener(' mousemove ', positionHandler, false); canvas.addEventListener(' touchmove ', positionHandler, false); 82. interface MouseEvent : UIEvent { readonly attribute long screenX ; readonly attribute long screenY ; readonly attribute long clientX ; readonly attribute long clientY ; readonly attribute boolean ctrlKey; readonly attribute boolean shiftKey; readonly attribute boolean altKey; readonly attribute boolean metaKey; readonly attribute unsigned short button; readonly attribute EventTarget relatedTarget; void initMouseEvent(...); }; www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MouseEvent 83. partial interface MouseEvent { readonly attribute double screenX; readonly attribute double screenY; readonly attribute double pageX ; readonly attribute double pageY ; readonly attribute double clientX; readonly attribute double clientY; readonly attribute double x ; readonly attribute double y ; readonly attribute double offsetX ; readonly attribute double offsetY ; }; www.w3.org/TR/cssom-view/#extensions-to-the-mouseevent-interface 84. interface TouchEvent : UIEvent { readonly attribute TouchList touches ; readonly attribute TouchList targetTouches ; readonly attribute TouchList changedTouches ; readonly attribute boolean altKey; readonly attribute boolean metaKey; readonly attribute boolean ctrlKey; readonly attribute boolean shiftKey; }; www.w3.org/TR/touch-events/#touchevent-interface 85. interface Touch { readonly attribute long identifier; readonly attribute EventTarget target; readonly attribute long screenX ; readonly attribute long screenY ; readonly attribute long clientX ; readonly attribute long clientY ; readonly attribute long pageX ; readonly attribute long pageY ; }; www.w3.org/TR/touch-events/#touch-interface 86. touches all touch poi

Recommended

View more >