getting touchy - introduction to touch (and pointer) events / jquery europe 2014 / vienna 28.02.2014

Download Getting touchy - Introduction to touch (and pointer) events / jQuery Europe 2014 / Vienna 28.02.2014

Post on 15-May-2015

7.163 views

Category:

Technology

2 download

Embed Size (px)

TRANSCRIPT

  • 1. getting touchy AN INTRODUCTION TO TOUCH (AND POINTER) EVENTSPatrick H. Lauke / jQuery Europe / Vienna / 28 February 2014

2. patrickhlauke.github.io/touch 3. how can I make my website work on touch devices? 4. you don't need touch events browsers emulate regular mouse events 5. patrickhlauke.github.io/touch/tests/event-listener_mouse-only.html 6. (mouseenter) > mouseover > mousemove* > mousedown > (focus) > mouseup > click *only a single sacrificial event is fired 7. on first tap (mouseenter) > mouseover > mousemove > mousedown > (focus) > mouseup > clicksubsequent taps mousemove > mousedown > mouseup > clicktapping away mouseout > (blur) focus/blur only on focusable elements in Opera Mobile and Firefox mouseout not on iOS Safari and embedded WebView (e.g. iOS Chrome) 8. emulation works, but is limiting/problematic 9. 1. delayed event dispatch 2. mouse-specific interfaces 3. mousemove doesn't track 10. 1. delayed event dispatch 2. mouse-specific interfaces 3. mousemove doesn't track 11. patrickhlauke.github.io/touch/tests/event-listener_show-delay.html 12. patrickhlauke.github.io/touch/tests/event-listener_show-delay.html 13. 1. delayed event dispatch 2. mouse-specific interfaces 3. mousemove doesn't track 14. vimeo.com/ondemand 15. 1. delayed event dispatch 2. mouse-specific interfaces 3. mousemove doesn't track 16. patrickhlauke.github.io/touch/particle/2 17. patrickhlauke.github.io/touch/particle/2 (bug in iOS7: moving finger does seem to scroll and fire multiple mousemove events?!) 18. we need to go deeper... 19. touch events introduced in iOS 2.0, 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 when listeners for touch events 23. 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 > clicksubsequent taps touchstart > [touchmove]+ > touchend > mousemove > mousedown > mouseup > clicktapping away mouseout > (mouseleave) > (blur) too many touchmove events abort the tap (after touchend) too many touchmove events on activatable elements lead to touchcancel not all browsers consistently send the touchmovesome browsers outright weird... 25. Browser/Android 4.3 (AppleWebKit/534.30) mouseover > mousemove > touchstart > touchend > mousedown > mouseup > clickBrowser/Blackberry PlayBook 2.0 (AppleWebKit/536.2) touchstart > mouseover > mousemove > mousedown > touchend > mouseup > click 26. touch events vs limitations/problems 27. 1. delayed event dispatch 2. mouse-specific interfaces 3. mousemove doesn't track 28. 1. delayed event dispatch 2. mouse-specific interfaces 3. mousemove doesn't track 29. patrickhlauke.github.io/touch/tests/event-listener_show-delay.html 30. patrickhlauke.github.io/touch/tests/event-listener_show-delay.html 31. why the delay? double-tap to zoom (mostly anyway) 32. what if browsers didn't wait? 33. Puffin/Android (popular in Korea?) puffinbrowser.com double-tap zooms and fires mouse events + click (also, doesn't support touch events at all) 34. when does the delay happen? 35. patrickhlauke.github.io/touch/tests/event-listener.html 36. patrickhlauke.github.io/touch/tests/event-listener.html 37. how can we make it feel responsive like a native app? 38. react to events fired before the 300ms delay... 39. touchstart for an immediate controltouchend for a control that fires after finger lifted 40. interlude: simple feature detection for touch events 41. if ('ontouchstart' in window) { /* some clever stuff here */ } /* older browsers have flaky support so more hacky tests needed... use Modernizr.touch or similar */ 42. /* common performance trick */ var clickEvent = ('ontouchstart' in window ? 'touchend' : 'click'); blah.addEventListener(clickEvent, function() { ... }, false); 43. don't make it touch-exclusive 44. hacks.mozilla.org/2013/04/detecting-touch... 45. if ('ontouchstart' in window) { /* browser supports touch events but user is not necessarily using touch (exclusively) */ } 46. hybrid devices touch + mouse + keyboard 47. Android + mouse behaves like touch touchstart > touchend > mouseover > mousemove > mousedown > (focus) > mouseup > click 48. Android + keyboard like desktop keyboard focus > click 49. VoiceOver enables keyboard access on iOS 50. iOS + keyboard similar to touch focus > touchstart > touchend > (mouseenter) > mouseover > mousemove > mousedown blur > mouseup > click 51. iOS + VoiceOver similar to touch focus > touchstart > touchend > (mouseenter) > mouseover > mousemove > mousedown blur > mouseup > click 52. Android + TalkBack keyboard/mouse hybrid focus > blur > mousedown > mouseup > click > focus(?)(though seems a bit flakey...) 53. touch or mouse or keyboard 54. touch and mouse and keyboard 55. /* doubled-up event listeners */ foo.addEventListener('touchend', someFunction, false); foo.addEventListener('click', someFunction, false); 56. foo.addEventListener('touchstart', function(e) { /* prevent delay + mouse events */ e.preventDefault(); }, false); /* doubled-up event listeners */ foo.addEventListener('touchend', someFunction, false); foo.addEventListener('click', someFunction, false); 57. preventDefaultcan kill scrolling, pinch/zoom, etc on touchstart/touchmove 58. github.com/ftlabs/fastclick 59. browsers working to remove delay when possible 60. patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html 61. patrickhlauke.github.io/touch/tests/event-listener_minimum-maximum-scale.html 62. patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html 63. patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html 64. patrickhlauke.github.io/touch/tests/event-listener_minimum-maximum-scale.html 65. Bug 922896 - Optimizations to remove 300ms touch > mouse events delay [RESOLVED - FIXED] 66. Chrome 32 for Android removes delay also when updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away 67. patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html 68. iOS/Safari designed themselves into a corner with double-tap to scroll bugs.webkit.org/show_bug.cgi?id=122212 69. 1. delayed event dispatch 2. mouse-specific interfaces 3. mousemove doesn't track 70. vimeo.com/ondemand 71. no isolated hover (or focus) on touch devices* * iOS fakes it, Samsung Galaxy S4 + stylus, ... 72. patrickhlauke.github.io/touch/css-dropdown/mouse-only.html 73. http://developer.apple.com/library/IOS/... 74. Modernizr issue 869: Detecting a mouse user 75. www.stucox.com/blog/you-cant-detect-a-touchscreen 76. avoid hover-based interfaces? complement for keyboard / touch! 77. patrickhlauke.github.io/touch/css-dropdown/mouse-keyboard-touch.html 78. 1. delayed event dispatch 2. mouse-specific interfaces 3. mousemove doesn't track 79. patrickhlauke.github.io/touch/particle/2 80. touchstart > [touchmove]+ > touchend > (mouseenter) > mouseover > mousemove* > mousedown > (focus) > mouseup > click *mouse event emulation fires only a single mousemove 81. doubling up handling of mousemove and touchmove 82. var posX, posY; ... function positionHandler(e) { posX = e.clientX; posY = e.clientY; } ... canvas.addEventListener('mousemove', positionHandler, false); 83. var posX, posY; ... function positionHandler(e) { /* handle both mouse and touch? */ } ... canvas.addEventListener('mousemove', positionHandler, false); canvas.addEventListener('touchmove', positionHandler, false); 84. 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 85. 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 86. interface Touch { readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute };long EventTarget long long long long long longidentifier; target; screenX; screenY; clientX; clientY; pageX; pageY;www.w3.org/TR/touch-events/#touch-interface 87. patrickhlauke.github.io/touch/touchlist-objects 88. var posX, posY; ... function positionHandler(e) { if ((e.clientX)&&(e.clientY)) { posX = e.clientX; posY = e.clientY; } else if (e.targetTouches) { posX = e.targetTouches[0].clientX; posY = e.targetTouches[0].clientY; e.preventDefault(); } } ... canvas.addEventListener('mousemove', positionHandler, false ); canvas.addEventListener('touchmove', positionHandler, false ); 89. patrickhlauke.github.io/