getting touchy - an introduction to touch and pointer events / web rebels / oslo / 22 may 2014

Download Getting touchy - an introduction to touch and pointer events / Web Rebels / Oslo / 22 May 2014

Post on 27-Jan-2015

107 views

Category:

Technology

4 download

Embed Size (px)

DESCRIPTION

 

TRANSCRIPT

  • 1. gettingtouchy AN INTRODUCTION TO TOUCH AND POINTER EVENTS Patrick H. Lauke / Web Rebels / Oslo / 22 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