Getting touchy - an introduction to touch events / Sainté Mobile Days / Saint-Etienne 22.11.2013

5,146 views
4,991 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
5,146
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Getting touchy - an introduction to touch events / Sainté Mobile Days / Saint-Etienne 22.11.2013

  1. 1. getting touchy AN INTRODUCTION TO TOUCH EVENTS Patrick H. Lauke / Sainté Mobile Days / Saint-Etienne / 22 November 2013
  2. 2. “how can I make my website work on touch devices?”
  3. 3. you don't need touch events browsers emulate regular mouse events
  4. 4. patrickhlauke.github.io/touch/tests/event-listener_mouse-only.html
  5. 5. patrickhlauke.github.io/touch/tests/event-listener_mouse-only.html
  6. 6. mouseover > mousemove* > mousedown > (focus) > mouseup > click *only a single “sacrificial” event is fired
  7. 7. emulation works, but is limiting/problematic
  8. 8. 1. delayed event dispatch 2. mousemove doesn't track there are more (e.g. no concept of hover on touchscreens)
  9. 9. 1. delayed event dispatch 2. mousemove doesn't track
  10. 10. patrickhlauke.github.io/touch/tests/event-listener_show-delay.html
  11. 11. patrickhlauke.github.io/touch/tests/event-listener_show-delay.html
  12. 12. 1. delayed event dispatch 2. mousemove doesn't track
  13. 13. patrickhlauke.github.io/touch/particle/2
  14. 14. patrickhlauke.github.io/touch/particle/2 (bug in iOS7: moving finger does seem to scroll and fire multiple mousemove events?!)
  15. 15. “we need to go deeper...”
  16. 16. touch events introduced in iOS 2.0, adopted in Chrome/Firefox/Opera www.w3.org/TR/touch-events
  17. 17. touchstart touchmove touchend touchcancel touchenter touchleave
  18. 18. patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html
  19. 19. patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html
  20. 20. touchstart > [touchmove]+ > touchend > mouseover > mousemove > mousedown > (focus) > mouseup > click
  21. 21. 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
  22. 22. touch events vs limitations/problems
  23. 23. 1. delayed event dispatch 2. mousemove doesn't track
  24. 24. 1. delayed event dispatch 2. mousemove doesn't track
  25. 25. patrickhlauke.github.io/touch/tests/event-listener.html
  26. 26. patrickhlauke.github.io/touch/tests/event-listener.html
  27. 27. “how can we make it feel responsive like a native app?”
  28. 28. react to events fired before the 300ms delay...
  29. 29. interlude: simple feature detection for touch events
  30. 30. if ('ontouchstart' in window) { /* some clever stuff here */ }
  31. 31. /* common performance “trick” */ var clickEvent = ('ontouchstart' in window ? 'touchend' : 'click'); blah.addEventListener(clickEvent, function() { ... }, false);
  32. 32. don't make it touch-exclusive
  33. 33. if ('ontouchstart' in window) { /* browser supports touch events but user is not necessarily using touch (exclusively) */ }
  34. 34. hybrid devices touch + mouse + keyboard
  35. 35. Android + mouse – behaves like touch touchstart > touchend > mouseover > mousemove > mousedown > mouseup > click
  36. 36. Android + keyboard – like desktop keyboard focus > click
  37. 37. VoiceOver enables keyboard access on iOS
  38. 38. iOS + keyboard – similar to touch focus > touchstart > touchend > mouseover > mousemove > mousedown blur > mouseup > click
  39. 39. iOS + VoiceOver – similar to touch focus > touchstart > touchend > mouseover > mousemove > mousedown blur > mouseup > click
  40. 40. Android + TalkBack – keyboard/mouse hybrid focus > blur > mousedown > mouseup > click > focus(?)
  41. 41. touch or mouse or keyboard
  42. 42. touch and mouse and keyboard
  43. 43. /* doubled-up event listeners */ foo.addEventListener('touchend', someFunction, false); foo.addEventListener('click', someFunction, false);
  44. 44. /* doubled-up event listeners */ foo.addEventListener('touchend', function(e) { /* prevent delay + mouse events */ e.preventDefault(); someFunction(); /* or even e.target.click(); */ }, false); foo.addEventListener('click', someFunction, false);
  45. 45. github.com/ftlabs/fastclick
  46. 46. preventDefault kills scrolling, long-press, pinch/zoom
  47. 47. browsers working to remove delay when possible
  48. 48. patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html
  49. 49. patrickhlauke.github.io/touch/tests/event-listener_minimum-maximum-scale.html
  50. 50. patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html
  51. 51. [...] no more 300ms click delay, or double-tap zoom, on mobile websites
  52. 52. patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html
  53. 53. iOS/Safari designed themselves into a corner with “double-tap to scroll” bugs.webkit.org/show_bug.cgi?id=122212
  54. 54. 1. delayed event dispatch 2. mousemove doesn't track
  55. 55. patrickhlauke.github.io/touch/particle/2
  56. 56. patrickhlauke.github.io/touch/particle/2 (bug in iOS7: moving finger does seem to scroll and fire multiple mousemove events?!)
  57. 57. touchstart > [touchmove]+ > touchend > mouseover > mousemove* > mousedown > (focus) > mouseup > click *mouse event emulation fires only a single mousemove
  58. 58. doubling up handling of mousemove and touchmove
  59. 59. var posX, posY; ... function positionHandler(e) { posX = e.clientX; posY = e.clientY; } ... canvas.addEventListener('mousemove', positionHandler, false);
  60. 60. var posX, posY; ... function positionHandler(e) { /* handle both mouse and touch? */ } ... canvas.addEventListener('mousemove', positionHandler, false); canvas.addEventListener('touchmove', positionHandler, false);
  61. 61. 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
  62. 62. 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
  63. 63. 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 long identifier; target; screenX; screenY; clientX; clientY; pageX; pageY; www.w3.org/TR/touch-events/#touch-interface
  64. 64. 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 );
  65. 65. patrickhlauke.github.io/touch/particle/3
  66. 66. tracking finger movement over time ... swipe gestures
  67. 67. patrickhlauke.github.io/touch/swipe
  68. 68. patrickhlauke.github.io/touch/swipe
  69. 69. patrickhlauke.github.io/touch/picture-slider
  70. 70. don't forget mouse/keyboard !
  71. 71. touchmove fires...a lot!
  72. 72. do absolute minimum on each touchmove (usually: store new coordinates)
  73. 73. heavy JavaScript on requestAnimationFrame setInterval
  74. 74. patrickhlauke.github.io/touch/touch-limit
  75. 75. why stop at a single point? multitouch support
  76. 76. 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
  77. 77. for (i=0; i<e.targetTouches.length; i++) { ... posX = e.targetTouches[i].clientX; posY = e.targetTouches[i].clientY; ... }
  78. 78. patrickhlauke.github.io/touch/tracker/multi-touch-tracker.html
  79. 79. iOS/iPad even preventDefault() can't override 4-finger gestures
  80. 80. iOS7/Safari even preventDefault() can't override back/forward swipe gestures
  81. 81. /* iOS/Safari has gesture events for size/rotation not supported in Chrome/Firefox, not part of the W3C Touch Events specification. With some trigonometry we can replicate these from basic principles. */ var distance = Math.sqrt(Math.pow(...)+Math.pow(...)); var angle = Math.atan2(...);
  82. 82. shinydemos.com/picture-organizer
  83. 83. touch events and Internet Explorer...
  84. 84. blogs.msdn.com/...
  85. 85. www.w3.org/TR/pointerevents
  86. 86. not just some “not invented here” new approach for IE10+
  87. 87. active development by Mozilla and Chrome teams ...Apple?
  88. 88. but that's probably enough for now...
  89. 89. pour en savoir plus: rendez-vous à l'atelier demain matin @patrick_h_lauke github.com/patrickhlauke/touch slideshare.net/redux paciellogroup.com splintered.co.uk

×