Getting touchy - an introduction to touch events / Sud Web / Avignon 17.05.2013

16,069 views
13,945 views

Published on

Published in: Technology

Getting touchy - an introduction to touch events / Sud Web / Avignon 17.05.2013

  1. getting touchyAN INTRODUCTION TO TOUCH EVENTSPatrick H. Lauke / Sud Web / Avignon / 17 May 2013
  2. how can I make my websitework on touch devices?
  3. you dont need touch eventsbrowsers emulate regular mouse events
  4. patrickhlauke.github.io/touch/tests/event-listener_mouse-only.html
  5. mouseover > mousemove* > mousedown >(focus) > mouseup > click*only a single “sacrificial” events is fired
  6. 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)
  7. emulation works but islimiting/problematic(more on that in a minute)
  8. “we need to go deeper...”
  9. touch eventsintroduced in iOS, adopted in Chrome/Firefox/Operawww.w3.org/TR/touch-events
  10. touchstarttouchmovetouchendtouchcancel
  11. patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html
  12. touchstart > [touchmove]+ > touchend >mouseover > mousemove > mousedown >(focus) > mouseup > click
  13. 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...
  14. 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
  15. limitations/problems ofmouse event emulation
  16. webkrauts.de/artikel/2012/einfuehrung-touch-events
  17. 1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesnt track
  18. 1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesnt track
  19. patrickhlauke.github.io/touch/tests/event-listener_show-delay.html
  20. patrickhlauke.github.io/touch/tests/event-listener.html
  21. “how can we make it feelresponsive like a native app?”
  22. simple feature detection fortouch events
  23. if (ontouchstart in window) {/* some clever stuff here */}
  24. /* common performance “trick” */var clickEvent = (ontouchstart in window ?touchend : click);blah.addEventListener(clickEvent,function() { ... }, false);
  25. dont make it touch-exclusive
  26. hacks.mozilla.org/2013/04/detecting-touch...
  27. www.stucox.com/blog/you-cant-detect-a-touchscreen
  28. if (ontouchstart in window) {/* browser supports touch eventsbut user is not necessarilyusing touch (exclusively) */}
  29. hybrid devicestouch + mouse + keyboard
  30. Android + mouse – behaves like touchtouchstart > touchend > mouseover > mousemove > mousedown > mouseup > click
  31. Blackberry PlayBook 2.0 + mouse – like desktop mousemouseover > mousedown > mousemove > mouseup > click
  32. Android + keyboard – like desktop keyboardfocus > click
  33. VoiceOver enables keyboard access on iOS
  34. iOS + keyboard – similar to touchfocus > touchstart > touchend > mouseover > mousemove > mousedownblur > mouseup > click
  35. mouse or touchvsmouse and touch
  36. /* doubled-up event listeners */foo.addEventListener(touchstart,someFunction, false);foo.addEventListener(click,someFunction, false);
  37. /* 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);
  38. preventDefaultkills scrolling, long-press,pinch/zoom
  39. patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html
  40. 1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesnt track
  41. vimeo.com/ondemand
  42. no isolated hover (or focus)on touch devices** iOS fakes it, Samsung Galaxy S4 + stylus, ...
  43. http://developer.apple.com/library/IOS/...
  44. avoid hover-based interfaces?complement for keyboard / touch!
  45. Modernizr issue 869: Detecting a mouse user
  46. 1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesnt track
  47. patrickhlauke.github.io/touch/particle/2
  48. touchstart > [touchmove]+ > touchend >mouseover > mousemove* > mousedown >(focus) > mouseup > click*mouse event emulation fires only a single mousemove
  49. doubling up handling ofmousemove and touchmove
  50. var posX, posY;...function positionHandler(e) {posX = e.clientX;posY = e.clientY;}...canvas.addEventListener(mousemove,positionHandler, false);
  51. var posX, posY;...function positionHandler(e) {/* handle both mouse and touch? */}...canvas.addEventListener(mousemove,positionHandler, false);canvas.addEventListener(touchmove,positionHandler, false);
  52. 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
  53. 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
  54. 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
  55. 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 );
  56. patrickhlauke.github.io/touch/particle/3
  57. patrickhlauke.github.io/touch/particle/4
  58. tracking finger movement=> swipe gestures
  59. patrickhlauke.github.io/touch/picture-slider
  60. dont forget mouse/keyboard !
  61. bradfrostweb.com/demo/mobile-first
  62. touchmove fires...a lot!
  63. patrickhlauke.github.io/touch/touch-limit
  64. heavy javascript onrequestAnimationFramesetInterval
  65. why stop at a single point?multitouch support
  66. 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
  67. for (i=0; i<e.targetTouches.length; i++) {...posX = e.targetTouches[i].clientX;posY = e.targetTouches[i].clientY;...}
  68. patrickhlauke.github.io/touch/tracker/multi-touch-tracker.html
  69. iOS/iPad even preventDefault()cant override 4-finger gestures
  70. multitouch gestures
  71. /* 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(...);
  72. patrickhlauke.github.io/touch/pinch-zoom-rotate
  73. shinydemos.com/picture-organizer
  74. www.html5rocks.com/en/mobile/touchandmouse
  75. touch events and IE10
  76. blogs.msdn.com/...
  77. www.w3.org/TR/pointerevents
  78. pointerover > mouseover >pointerdown > mousedown >pointermove > mousemove >(focus) >pointerup > mouseup >pointerout > mouseout >clickmouse events fired “inline” with pointer events!
  79. 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
  80. /* 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
  81. preventDefault() wont worktouch-action: auto|none|[pan-x][pan-y]www.w3.org/TR/pointerevents/#the-touch-action-css-property
  82. blogs.msdn.com/b/davrous/.../handling-touch-in-your-html5-apps...
  83. html5labs.interoperabilitybridges.com/prototypes/...
  84. handjs.codeplex.com
  85. /* 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? */
  86. www.exploretouch.ie/behind-the-scenes
  87. debugging/testing
  88. Issue 181204: Emulate touch events - event order different from real devices
  89. developers.google.com/chrome-developer-tools/docs/console#monitoring_events
  90. Bug 861876 - [...] multiple mousemoves being fired
  91. youtube.com/watch?v=AZKpByV5764
  92. merci@patrick_h_laukegithub.com/patrickhlauke/touchslideshare.net/reduxpaciellogroup.comsplintered.co.uk

×