Getting touchy - an introduction to touch events / Webinale / Berlin 04.06.2013

3,121 views
2,998 views

Published on

Published in: Technology
3 Comments
3 Likes
Statistics
Notes
No Downloads
Views
Total views
3,121
On SlideShare
0
From Embeds
0
Number of Embeds
381
Actions
Shares
0
Downloads
16
Comments
3
Likes
3
Embeds 0
No embeds

No notes for slide

Getting touchy - an introduction to touch events / Webinale / Berlin 04.06.2013

  1. 1. getting touchyAN INTRODUCTION TO TOUCH EVENTSPatrick H. Lauke / Webinale / Berlin / 4 Juni 2013
  2. 2. webkrauts.de/artikel/2012/einfuehrung-touch-events
  3. 3. how can I make my websitework on touch devices?
  4. 4. you dont need touch eventsbrowsers emulate regular mouse events
  5. 5. patrickhlauke.github.io/touch/tests/event-listener_mouse-only.html
  6. 6. mouseover > mousemove* > mousedown >(focus) > mouseup > click*only a single “sacrificial” events is fired
  7. 7. on first tapmouseover > mousemove > mousedown >(focus) > mouseup > clicksubsequent tapsmousemove > mousedown > (focus) >mouseup > clicktapping awaymouseout > (blur)focus/blur only on focusable elements in Opera Mobile and Firefoxmouseout not on iOS Safari and embedded WebView (e.g. iOS Chrome)
  8. 8. emulation works but islimiting/problematic(more on that in a minute)
  9. 9. 1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesnt track
  10. 10. 1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesnt track
  11. 11. patrickhlauke.github.io/touch/tests/event-listener_show-delay.html
  12. 12. 1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesnt track
  13. 13. vimeo.com/ondemand
  14. 14. 1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesnt track
  15. 15. patrickhlauke.github.io/touch/particle/2
  16. 16. “we need to go deeper...”
  17. 17. touch eventsintroduced in iOS, adopted in Chrome/Firefox/Operawww.w3.org/TR/touch-events
  18. 18. touchstarttouchmovetouchendtouchcancel
  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. on first taptouchstart > [touchmove]+ > touchend > mouseover >mousemove > mousedown > (focus) > mouseup > clicksubsequent tapstouchstart > [touchmove]+ > touchend > mousemove >mousedown > (focus) > mouseup > clicktapping awaymouseout > (blur)too many touchmove events abort the tap (after touchend)not all browsers consistently send the touchmovesome browsers outright weird...
  22. 22. Browser/Android 4.2.2(AppleWebKit/534.30)mouseover > mousemove > touchstart > touchend > mousedown >mouseup > clickBrowser/Blackberry PlayBook 2.0(AppleWebKit/536.2)touchstart > mouseover > mousemove > mousedown > touchend >mouseup > click
  23. 23. touch eventsvslimitations/problems ofmouse event emulation
  24. 24. 1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesnt track
  25. 25. 1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesnt track
  26. 26. patrickhlauke.github.io/touch/tests/event-listener_show-delay.html
  27. 27. patrickhlauke.github.io/touch/tests/event-listener.html
  28. 28. “how can we make it feelresponsive like a native app?”
  29. 29. simple feature detection fortouch 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. dont make it touch-exclusive
  33. 33. hacks.mozilla.org/2013/04/detecting-touch...
  34. 34. if (ontouchstart in window) {/* browser supports touch eventsbut user is not necessarilyusing touch (exclusively) */}
  35. 35. hybrid devicestouch + mouse + keyboard
  36. 36. Android + mouse – behaves like touchtouchstart > touchend > mouseover > mousemove > mousedown > mouseup > click
  37. 37. Blackberry PlayBook 2.0 + mouse – like desktop mousemouseover > mousedown > mousemove > mouseup > click
  38. 38. Android + keyboard – like desktop keyboardfocus > click
  39. 39. VoiceOver enables keyboard access on iOS
  40. 40. iOS + keyboard – similar to touchfocus > touchstart > touchend > mouseover > mousemove > mousedownblur > mouseup > click
  41. 41. iOS + VoiceOver – similar to touchfocus > touchstart > touchend > mouseover > mousemove > mousedownblur > mouseup > click
  42. 42. Android + TalkBack – keyboard/mouse hybridfocus > blur > mousedown > mouseup > click > focus(?)
  43. 43. mouse or touchvsmouse and touch andkeyboard
  44. 44. /* doubled-up event listeners */foo.addEventListener(touchstart,someFunction, false);foo.addEventListener(click,someFunction, false);
  45. 45. /* doubled-up event listeners */foo.addEventListener(touchstart,function(e) {/* prevent delay + mouse events */e.preventDefault();someFunction();/* or even e.target.click(); */}, false);foo.addEventListener(click,someFunction, false);
  46. 46. preventDefaultkills scrolling, long-press,pinch/zoom
  47. 47. browsers working to removedelay when possiblee.g. Chrome on desktop, Chrome/Firefox on Android
  48. 48. patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html
  49. 49. patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html
  50. 50. 1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesnt track
  51. 51. vimeo.com/ondemand
  52. 52. no isolated hover (or focus)on touch devices** iOS fakes it, Samsung Galaxy S4 + stylus, ...
  53. 53. http://developer.apple.com/library/IOS/...
  54. 54. avoid hover-based interfaces?complement for keyboard / touch!
  55. 55. Modernizr issue 869: Detecting a mouse user
  56. 56. www.stucox.com/blog/you-cant-detect-a-touchscreen
  57. 57. 1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesnt track
  58. 58. patrickhlauke.github.io/touch/particle/2
  59. 59. touchstart > [touchmove]+ > touchend >mouseover > mousemove* > mousedown >(focus) > mouseup > click*mouse event emulation fires only a single mousemove
  60. 60. doubling up handling ofmousemove and touchmove
  61. 61. var posX, posY;...function positionHandler(e) {posX = e.clientX;posY = e.clientY;}...canvas.addEventListener(mousemove,positionHandler, false);
  62. 62. var posX, posY;...function positionHandler(e) {/* handle both mouse and touch? */}...canvas.addEventListener(mousemove,positionHandler, false);canvas.addEventListener(touchmove,positionHandler, false);
  63. 63. 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
  64. 64. 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
  65. 65. 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
  66. 66. 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 );
  67. 67. patrickhlauke.github.io/touch/particle/3
  68. 68. patrickhlauke.github.io/touch/particle/4
  69. 69. tracking finger movement=> swipe gestures
  70. 70. patrickhlauke.github.io/touch/picture-slider
  71. 71. dont forget mouse/keyboard !
  72. 72. bradfrostweb.com/demo/mobile-first
  73. 73. touchmove fires...a lot!
  74. 74. patrickhlauke.github.io/touch/touch-limit
  75. 75. heavy javascript onrequestAnimationFramesetInterval
  76. 76. why stop at a single point?multitouch support
  77. 77. 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
  78. 78. for (i=0; i<e.targetTouches.length; i++) {...posX = e.targetTouches[i].clientX;posY = e.targetTouches[i].clientY;...}
  79. 79. patrickhlauke.github.io/touch/tracker/multi-touch-tracker.html
  80. 80. iOS/iPad even preventDefault()cant override 4-finger gestures
  81. 81. multitouch gestures
  82. 82. /* iOS/Safari has gesture events for size/rotation,not supported in Chrome/Firefox/Opera,not part of the W3C Touch Events spec.With some trigonometry we can replicate thesefrom basic principles. */var distance = Math.sqrt(Math.pow(...)+Math.pow(...));var angle = Math.atan2(...);
  83. 83. patrickhlauke.github.io/touch/pinch-zoom-rotate
  84. 84. shinydemos.com/picture-organizer
  85. 85. www.html5rocks.com/en/mobile/touchandmouse
  86. 86. touch events and IE10
  87. 87. blogs.msdn.com/...
  88. 88. www.w3.org/TR/pointerevents
  89. 89. pointerover > mouseover >pointerdown > mousedown >pointermove > mousemove >(focus) >pointerup > mouseup >pointerout > mouseout >clickmouse events fired “inline” with pointer events!
  90. 90. 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
  91. 91. /* Pointer Events extend Mouse Eventsvs Touch Events and their completely new objects/arrays */interface PointerEvent : MouseEvent {readonly attribute long pointerId;readonly attribute long width;readonly attribute long height;readonly attribute float pressure;readonly attribute long tiltX;readonly attribute long tiltY;readonly attribute DOMString pointerType;readonly attribute boolean isPrimary;};www.w3.org/TR/pointerevents/#pointerevent-interface
  92. 92. preventDefault() wont worktouch-action: auto|none|[pan-x][pan-y]www.w3.org/TR/pointerevents/#the-touch-action-css-property
  93. 93. blogs.msdn.com/b/davrous/.../handling-touch-in-your-html5-apps...
  94. 94. html5labs.interoperabilitybridges.com/prototypes/...
  95. 95. handjs.codeplex.com
  96. 96. /* like iOS/Safari, IE10/Win has higher-level gestures,but these are not part of the W3C Pointer Events spec.Replicate these from basic principles again? */
  97. 97. www.exploretouch.ie/behind-the-scenes
  98. 98. debugging/testing
  99. 99. Issue 181204: Emulate touch events - event order different from real devices
  100. 100. developers.google.com/chrome-developer-tools/docs/console#monitoring_events
  101. 101. Bug 861876 - [...] multiple mousemoves being fired
  102. 102. youtube.com/watch?v=AZKpByV5764
  103. 103. danke@patrick_h_laukegithub.com/patrickhlauke/touchslideshare.net/reduxpaciellogroup.comsplintered.co.uk

×