Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Getting touchy - an introduction to touch and pointer events / Smashing Conference / Freiburg / 14 September 2015

1,873 views

Published on

For the "evergreen" master slide set of this talk, see http://patrickhlauke.github.io/getting-touchy-presentation/

Published in: Technology
  • Be the first to comment

Getting touchy - an introduction to touch and pointer events / Smashing Conference / Freiburg / 14 September 2015

  1. 1. gettingtouchy ANINTRODUCTIONTOTOUCHANDPOINTEREVENTS Patrick H. Lauke / Version 1.4.14092015 / Smashing Conference Freiburg 2015
  2. 2. github.com/patrickhlauke/getting-touchy-presentation "evergreen" expanded version of this presentation (and branches for specific conferences)
  3. 3. patrickhlauke.github.io/touch
  4. 4. Touch/pointer events test results
  5. 5. “how can I make my website work on touch devices?”
  6. 6. you don't need touch events browsers emulate regular mouse events
  7. 7. patrickhlauke.github.io/touch/tests/event-listener_mouse-only.html
  8. 8. patrickhlauke.github.io/touch/tests/event-listener_mouse-only.html
  9. 9. compatibility mouse events (mouseenter) > mouseover > mousemove* > mousedown > (focus) > mouseup > click * only a single “sacrificial” mousemove event fired
  10. 10. 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
  11. 11. emulation works, but is limiting/problematic
  12. 12. 1.  delayed event dispatch 2.  mousemove doesn't track ("evergreen" presentation also covers hover/mouseover)
  13. 13. 1.  delayed event dispatch 2.  mousemove doesn't track
  14. 14. patrickhlauke.github.io/touch/tests/event-listener_show-delay.html
  15. 15. patrickhlauke.github.io/touch/tests/event-listener_show-delay.html
  16. 16. 1.  delayed event dispatch 2.  mousemove doesn't track
  17. 17. patrickhlauke.github.io/touch/particle/2
  18. 18. patrickhlauke.github.io/touch/particle/2
  19. 19. “we need to go deeper...”
  20. 20. touch events introduced by Apple, adopted in Chrome/Firefox/Opera www.w3.org/TR/touch-events
  21. 21. touchstart touchmove touchend touchcancel
  22. 22. patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html
  23. 23. patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html Bug 128534 - 'mouseenter' mouse compat event not fired...
  24. 24. events fired on tap touchstart > [touchmove]+ > touchend > (mouseenter) > mouseover > mousemove > mousedown > (focus) > mouseup > click (mouse events only fired for single-finger tap)
  25. 25. 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)
  26. 26. •   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...
  27. 27. 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
  28. 28. Touch/pointer events test results
  29. 29. touch events vs limitations/problems
  30. 30. 1.  delayed event dispatch 2.  mousemove doesn't track
  31. 31. 1.  delayed event dispatch 2.  mousemove doesn't track
  32. 32. patrickhlauke.github.io/touch/tests/event-listener_show-delay.html
  33. 33. why the delay? double-tap to zoom (mostly anyway)
  34. 34. when does the delay happen?
  35. 35. patrickhlauke.github.io/touch/tests/event-listener.html
  36. 36. touch / mouse events delay touchstart > [touchmove]+ > touchend > [300ms delay] (mouseenter) > mouseover > mousemove > mousedown > (focus) > mouseup > click
  37. 37. “how can we make it feel responsive like a native app?”
  38. 38. react to events fired before the 300ms delay...
  39. 39. touchstart for an “immediate” control (e.g. fire/jump button on a game)
  40. 40. touchend for a control that fires after finger lifted
  41. 41. interlude: simple feature detection for touch events
  42. 42. /* 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 */
  43. 43. /* common performance “trick” */ var clickEvent = ( 'ontouchstart' in window ? 'touchend' : 'click' ); blah.addEventListener( clickEvent , function() { ... }, false); /* if touch events are supported, only listen to touchend, not click */
  44. 44. don't make it touch-exclusive
  45. 45. hybrid devices touch + mouse + keyboard
  46. 46. patrickhlauke.github.io/touch/tests/event-listener_show-delay-naive-event-fix.html
  47. 47. Bug 888304 - touch-events on Firefox-desktop should be disabled until we can support them properly
  48. 48. Issue 392584: Enable TouchEvent API all the time
  49. 49. even on "mobile" we can have multiple inputs...
  50. 50. Android + mouse – behaves like touch touchstart > touchend > mouseover > mousemove > mousedown > (focus) > mouseup > click
  51. 51. Windows 10 Mobile/Microsoft Edge + mouse - like desktop mouseover > mousedown > mousemove > mouseup > click
  52. 52. Android + keyboard – like desktop keyboard (TAB / ENTER) focus > click
  53. 53. iOS keyboard only works in same situations as on-screen keyboard (e.g. text inputs, URL entry)
  54. 54. mobile Assistive Technologies (e.g. screen readers on touchscreen devices)
  55. 55. iOS + VoiceOver (with/without keyboard) – similar to touch focus > touchstart > touchend > (mouseenter) > mouseover > mousemove > mousedown > blur > mouseup > click
  56. 56. Android + TalkBack – keyboard/mouse hybrid focus > blur > mousedown > mouseup > click > focus(?)
  57. 57. further scenarios? •   desktop with external touchscreen •   desktop with external touchpad •   touchscreen laptop with non-touch second screen •   touchscreen laptop with trackpad/mouse •   ...and other permutations?
  58. 58. no way to detect these cases...
  59. 59. hacks.mozilla.org - Detecting touch [...]
  60. 60. /* 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 ... */ }
  61. 61. touch or mouse or keyboard
  62. 62. touch and mouse and keyboard
  63. 63. /* doubled-up event listeners */ foo.addEventListener(' touchend ', someFunction, false); foo.addEventListener(' click ', someFunction, false); /* but this would fire our function twice for touch? */
  64. 64. /* doubled-up event listeners */ foo.addEventListener('touchend', someFunction, false); foo.addEventListener('click', someFunction, false); /* prevent mouse events + click as part of the common handler */ function someFunction(e) { ... if (e.type == 'touchend') { e.preventDefault(); } ... }
  65. 65. preventDefault() kills scrolling, pinch/zoom, etc
  66. 66. apply preventDefault() carefully (just on buttons/links, not entire page)
  67. 67. github.com/ftlabs/fastclick
  68. 68. patrickhlauke.github.io/touch/fastclick/fastclick.html YouTube: iOS/Safari 300ms click delay: vanilla Bootstrap and using fastclick.js
  69. 69. browsers working to remove double-tap to zoom delay (when page not zoomable)
  70. 70. <meta name="viewport" content="user-scalable=no"> patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html
  71. 71. ... content="minimum-scale=1, maximum-scale=1" patrickhlauke.github.io/touch/tests/event-listener_minimum-maximum-scale.html
  72. 72. what about accessibility?
  73. 73. "Force enable zoom" reintroduces delay patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html
  74. 74. "mobile optimised" viewport and "double-tap to zoom"
  75. 75. Chrome 32+ / Android: content="width=device-width" suppresses double-tap-to-zoom, still allows pinch zoom Google Developers: 300ms tap delay, gone away
  76. 76. Bug 941995 - Remove 300ms [...] on "responsive" pages [RESOLVED FIXED]
  77. 77. patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html
  78. 78. iOS/Safari designed themselves into a corner: “double-tap to scroll” Bug 122212 - Optimizations to remove 300ms touch > mouse events delay
  79. 79. patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
  80. 80. 1.  delayed event dispatch 2.  mousemove doesn't track
  81. 81. patrickhlauke.github.io/touch/particle/2
  82. 82. patrickhlauke.github.io/touch/particle/2
  83. 83. 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
  84. 84. doubling up handling of mousemove and touchmove
  85. 85. var posX, posY; ... function positionHandler(e) { posX = e.clientX ; posY = e.clientY ; } ... canvas.addEventListener(' mousemove ', positionHandler, false);
  86. 86. var posX, posY; ... function positionHandler(e) { posX = e.clientX ; posY = e.clientY ; } ... canvas.addEventListener(' mousemove ', positionHandler, false); canvas.addEventListener(' touchmove ', positionHandler, false); /* but this won't work for touch... */
  87. 87. 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
  88. 88. 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
  89. 89. 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
  90. 90. 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
  91. 91. touches all touch points on screen targetTouches all touch points that started on the element changedTouches touch points that caused the event to fire
  92. 92. patrickhlauke.github.io/touch/touchlist-objects
  93. 93. 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 );
  94. 94. patrickhlauke.github.io/touch/particle/3
  95. 95. www.splintered.co.uk/experiments/archives/paranoid_0.5
  96. 96. patrickhlauke.github.io/touch/picture-slider
  97. 97. tracking finger movement over time ... swipe gestures
  98. 98. patrickhlauke.github.io/touch/swipe
  99. 99. don't forget mouse/keyboard!
  100. 100. bradfrostweb.com/demo/mobile-first
  101. 101. touchmove fires...a lot!
  102. 102. do absolute minimum on each touchmove (usually: store coordinates)
  103. 103. heavy JavaScript on setInterval or requestAnimationFrame
  104. 104. why stop at a single point? multitouch support
  105. 105. 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
  106. 106. /* iterate over touch array */ for (i=0; i< e.targetTouches .length; i++) { ... posX = e.targetTouches[i].clientX ; posY = e.targetTouches[i].clientY ; ... }
  107. 107. patrickhlauke.github.io/touch/tracker/multi-touch-tracker.html
  108. 108. multitouch gestures
  109. 109. /* iOS/Safari/WebView has gesture events for size/rotation, not part of the W3C Touch Events spec. */ gesturestart / gesturechange / gestureend function(e) { /* e.scale e.rotation */ } /* not supported in Chrome/Firefox/Opera */
  110. 110. /* with some trigonometry we can replicate these from basic principles. */ var distance = Math.sqrt(Math.pow(...)+Math.pow(...)); var angle = Math.atan2(...);
  111. 111. patrickhlauke.github.io/touch/picture-organiser
  112. 112. what about Internet Explorer?
  113. 113. up to IE9 (Win7 / WinPhone7.5) only mouse events
  114. 114. in IE10 Microsoft introduced Pointer Events
  115. 115. unifies mouse, touch and pen input into a single event model
  116. 116. not just some “not invented here” technology
  117. 117. submitted by Microsoft as W3C Candidate REC 09 May 2013
  118. 118. Pointer Events - W3C REC 24 February 2015
  119. 119. Issue 162757: Implement pointer events in Chrome behind experimental flag (however, more on this later...)
  120. 120. hacks.mozilla.org - Pointer Events now in Firefox Nightly (at the moment, only for mouse and quite basic)
  121. 121. Firefox Nightly now first browser with Pointer Events on OS X
  122. 122. ...what about Apple?
  123. 123. Bug 105463 - Implement pointer events RESOLVED WONTFIX
  124. 124. Maciej Stachowiak - [webkit-dev] pointer events specification - first editors draft
  125. 125. @patrick_h_lauke paraphrasing Apple's stance on Pointer Events...
  126. 126. the anatomy of Pointer Events (sequence, event object, ...)
  127. 127. patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html
  128. 128. events fired on tap (Edge) mousemove* > pointerover > mouseover > pointerenter > mouseenter > pointerdown > mousedown > focus gotpointercapture > pointermove > mousemove > pointerup > mouseup > lostpointercapture > click > pointerout > mouseout > pointerleave > mouseleave mouse events fired “inline” with pointer events (for a primary pointer, e.g. first finger on screen)
  129. 129. vendor-prefixed in IE10 MSPointerDown etc navigator.msMaxTouchPoints -ms-touch-action unprefixed in IE11 (but prefixed versions still mapped for compatibility)
  130. 130. /* Pointer Events extend Mouse Events vs 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; } /* plus all the classic MouseEvent attributes like clientX , clientY , etc */
  131. 131. simple feature detection for pointer events
  132. 132. /* detecting pointer events support */ if ( window.PointerEvent ) { /* some clever stuff here but this covers touch, stylus, mouse, etc */ } /* still listen to click for keyboard! */
  133. 133. "don't forget about keyboard users" note in Pointer Events spec
  134. 134. /* detect maximum number of touch points */ if ( navigator.maxTouchPoints > 0 ) { /* device with a touchscreen */ } if ( navigator.maxTouchPoints > 1 ) { /* multitouch-capable device */ }
  135. 135. are pointer events better?
  136. 136. pointer events vs limitations/problems of mouse event emulation
  137. 137. 1.  delayed event dispatch 2.  mousemove doesn't track
  138. 138. 1.  delayed event dispatch 2.  mousemove doesn't track
  139. 139. patrickhlauke.github.io/touch/tests/event-listener.html (IE11/WinPhone 8.1 Update no optimization for width=device-width )
  140. 140. patrickhlauke.github.io/touch/tests/event-listener.html (IE/Win8 has double-tap to zoom, so problem on desktop too)
  141. 141. patrickhlauke.github.io/touch/tests/event-listener.html (Microsoft Edge/Win10 has double-tap to zoom, so problem on desktop too)
  142. 142. pointer / mouse events and delay ... [300ms delay] click ... 300ms delay just before click event
  143. 143. “how can we make it feel responsive like a native app?”
  144. 144. we could try a similar approach to touch events...
  145. 145. •   double-up pointerup and click listeners? •   prevent code firing twice with preventDefault ? won't work: preventDefault() stops mouse compatibility events, but click is not considered mouse compatibility event
  146. 146. a more declarative approach with touch-action
  147. 147. CSS property what action should the browser handle? touch-action: auto | none | [ pan-x || pan-y ] | manipulation www.w3.org/TR/pointerevents/#the-touch-action-css-property only determines default touch action, does not stop compatibility mouse events nor click
  148. 148. touch-action:none (suppress all default browser behaviour)
  149. 149. patrickhlauke.github.io/touch/tests/event-listener_touch[...]
  150. 150. patrickhlauke.github.io/touch/tests/event-listener_touch[...]
  151. 151. touch-action:none kills scrolling, long-press, pinch/zoom
  152. 152. touch-action:manipulation (suppress double-tap-to-zoom)
  153. 153. patrickhlauke.github.io/touch/tests/event-listener_touch[...]
  154. 154. patrickhlauke.github.io/touch/tests/event-listener_touch[...]
  155. 155. Bug 979345 - Implement touch-action:manipulation [...] [RESOLVED FIXED]
  156. 156. Issue 349016: Add support for touch-action:manipulation chrome://flags/#enable-experimental-web-platform-features (Chrome 35) [FIXED]
  157. 157. Bug 133114 - Implement " touch-action:manipulation " [...] Apple at least considering this, for once...
  158. 158. browsers working to remove double-tap to zoom delay (when page not zoomable)
  159. 159. <meta name="viewport" content="user-scalable=no"> patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html
  160. 160. ... content="minimum-scale=1, maximum-scale=1" patrickhlauke.github.io/touch/tests/event-listener_minimum-maximum-scale.html
  161. 161. Microsoft Edge removes delay for width=device-width patrickhlauke.github.io/touch/tests/event-listener_width-device-width.html
  162. 162. 1.  delayed event dispatch 2.  mousemove doesn't track
  163. 163. patrickhlauke.github.io/touch/particle/2 mousemove / pointermove fire, but browser scroll action takes over
  164. 164. you can "fake" it with touch-action:none and listen for mouse events...
  165. 165. patrickhlauke.github.io/touch/particle/2a (does not work in Microsoft Edge/Windows 10 Mobile due to touch events support)
  166. 166. better: just listen to pointermove...
  167. 167. no need for separate mouse or touch event listeners
  168. 168. /* touch events: separate handling */ foo.addEventListener('touchmove', ... , false); foo.addEventListener('mousemove', ... , false); /* pointer events: single listener for mouse, stylus, touch */ foo.addEventListener(' pointermove ', ... , false);
  169. 169. no need for separate mouse or touch code to get x / y coords
  170. 170. /* Pointer Events extend Mouse Events */ foo.addEventListener(' pointermove ', function(e) { ... posX = e.clientX ; posY = e.clientY ; ... }, false); www.w3.org/TR/pointerevents/#pointerevent-interface
  171. 171. 3D Rotator by Creative Punch coded to only use mouse events
  172. 172. 3D Rotator modified to use Pointer Events minimal code changes, as Pointer Events extend mouse events
  173. 173. but you can distinguish mouse or touch or stylus
  174. 174. foo.addEventListener('pointermove', function(e) { ... switch( e.pointerType ) { case ' mouse ': ... break; case ' pen ': ... break; case ' touch ': ... break; default : /* future-proof */ } ... } , false);
  175. 175. /* in IE11/Edge, pointerType returns a string in IE10, the return type is long */ MSPOINTER_TYPE_TOUCH: 0x00000002 MSPOINTER_TYPE_PEN: 0x00000003 MSPOINTER_TYPE_MOUSE: 0x00000004 MSDN: IE Dev Center - API reference - pointerType property
  176. 176. what about multitouch?
  177. 177. /* PointerEvents don't have the handy TouchList objects, so we have to replicate something similar... */ var points = []; switch (e.type) { case ' pointerdown ': /* add to the array */ break; case ' pointermove ': /* update the relevant array entry's x and y */ break; case ' pointerup ': /* remove the relevant array entry */ break; }
  178. 178. patrickhlauke.github.io/touch/tracker/multi-touch-tracker-pointer.html (note multiple isPrimary pointers)
  179. 179. simultaneous use of inputs is hardware-dependent (e.g. Surface 3 "palm blocking" prevents concurrent touch/stylus/mouse, but not touch/external mouse/external stylus)
  180. 180. YouTube: Pointer Events support multiple stylus/pen inputs simultaneously
  181. 181. /* like iOS/Safari, IE/Win has higher-level gestures , but these are not part of the W3C Pointer Events spec. Replicate these from basic principles again... */ MSDN IE10 Developer Guide: Gesture object and events
  182. 182. extended capabilities (if supported by hardware)
  183. 183. /* Pointer Events - pressure*/ 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; } pressure : value in range [0,1]. if no hardware support, 0.5 in active button state, 0 otherwise
  184. 184. patrickhlauke.github.io/touch/tracker/... YouTube: Touch tracker with Surface 3 pen
  185. 185. hovering stylus •   hardware-dependant •    pointermove fires •    pressure == 0 (non-active button state) •   track pointerdown / pointerup to be safe
  186. 186. /* Pointer Events - tilt */ 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; } tiltX / tiltY : value in degrees [-90, 90]. returns 0 if hardware does not support tilt
  187. 187. patrickhlauke.github.io/touch/pen-tracker YouTube: ...pen with tilt, pressure and hover support
  188. 188. pointermove fires if tiltX, tiltY or pressure change (even if x/y position doesn't...)
  189. 189. pointer events as the future?
  190. 190. Issue 162757: Implement pointer events in Chrome behind experimental flag WontFix
  191. 191. YouTube: Google Developers - HTTP 203: Pointer Events
  192. 192. 1.  performance issues (hit-testing) 2.  unified event model not "mobile first" 3.  difficult to implement "pull to refresh" 4.  we already have touch events
  193. 193. 1.  performance issues (hit-testing) 2.  unified event model not "mobile first" 3.  difficult to implement "pull to refresh" 4.  we already have touch events 5.  Apple won't implement them...
  194. 194. Google working instead to expand Touch Events
  195. 195. Issue 404128: Meta: Extend TouchEvent API to have the power of PointerEvents...
  196. 196. W3C Touch Events Extensions WG Note
  197. 197. /* extension to touch objects */ partial interface Touch { readonly attribute float radiusX; readonly attribute float radiusY; readonly attribute float rotationAngle; readonly attribute float force; };
  198. 198. Google Developers: Using rotationAngle and touchRadius
  199. 199. Rick Byers - Paint (with rotationAngle and touchRadius)
  200. 200. W3C Touch Events Community Group
  201. 201. W3C Touch Events - Level 2 (Editor's Draft) (merges errata, touch events extensions, fractional touch coordinates)
  202. 202. following developer outcry, Google reconsidered support for Pointer Events...
  203. 203. Chrome Canary (currently 47.0.2504.0) has rough experimental support for Pointer Events (for desktop w/touch only) chrome.exe --enable-blink-features=PointerEvent
  204. 204. work now continues to enhance/expand Pointer Events... W3C Pointer Events - Level 2 (Editor's Draft)
  205. 205. touch events in IE/Edge
  206. 206. MSDN IEBlog: The Mobile Web should just work for everyone Windows Phone 8.1 Update now supports Pointer Events and Touch Events
  207. 207. "frankensteining" pointer and touch events
  208. 208. touchstart > [touchmove]+ > touchend > [300ms delay] > mouseover > mousemove > mousedown > mouseup > click vs pointerover > mouseover > pointerdown > mousedown > pointermove > mousemove > pointerup > mouseup > [300ms delay] > click > pointerout > mouseout > pointerleave > mouseleave
  209. 209. patrickhlauke.github.io/touch/tests/event-listener.html
  210. 210. events fired on tap (IE11) mousemove* > pointerover > mouseover > pointerenter > mouseenter > pointerdown > touchstart > mousedown > gotpointercapture > focus > pointermove > touchmove > mousemove > pointerup > touchend > mouseup > lostpointercapture > pointerout > mouseout > pointerleave > mouseleave > click IE11/Windows Phone 8.1u1 with "frankensteined" Pointer/Touch Events support (but not on desktop)
  211. 211. Windows Mobile Insider Preview
  212. 212. patrickhlauke.github.io/touch/tests/event-listener.html
  213. 213. events fired on tap (Microsoft Edge) pointerover > pointerenter > pointerdown > touchstart > gotpointercapture pointermove > touchmove > pointerup > touchend > mouseover > mouseenter > mousemove > mousedown > focus > mouseup > click > lostpointercapture > pointerout > pointerleave Microsoft Edge/Windows 10 Mobile closer to touch events (note grouped mouse compatibility events)
  214. 214. touch events only turned on for mobile
  215. 215. W3C Touch Events WG mailing list Jacob Rossi - Enabling Touch Events everywhere
  216. 216. about:flags in Microsoft Edge to turn on touch events on desktop (e.g. touch-enabled laptops)
  217. 217. transitional event handling (until all browsers support pointer events)
  218. 218. /* cover all cases (hat-tip Stu Cox) */ if ('onpointerdown' in window) { /* bind to Pointer Events: pointerdown, pointerup, etc */ } else { /* bind to mouse events: mousedown, mouseup, etc */ if ('ontouchstart' in window) { /* bind to Touch Events: touchstart, touchend, etc */ } } /* bind to keyboard / click */
  219. 219. polyfills for pointer events (code for tomorrow, today)
  220. 220. HandJS
  221. 221. Polymer
  222. 222. GitHub - Polymer/PointerEvents
  223. 223. GitHub - Polymer/PointerEvents deprecated
  224. 224. jQuery blog - Improving the Pointer Events Polyfill
  225. 225. GitHub - jQuery Pointer Events Polyfill (PEP)
  226. 226. /* adding jQuery PEP */ <script src="https://code.jquery.com/pep/0.3.0/pep.js"></script> /* need to use custom touch-action attribute, not CSS (yet) */ <button touch-action="none" >...</div>
  227. 227. Alex Schmitz' PEP demo
  228. 228. utility libraries (because life is too short to hand-code gesture support)
  229. 229. Hammer.js
  230. 230. Hammer.js
  231. 231. /* Hammer's high-level events example */ var element = document.getElementById('test_el'); var hammertime = new Hammer(element); hammertime.on("swipe", function(event) { /* handle horizontal swipes */ });
  232. 232. patrickhlauke.github.io/touch/hammer/swipe
  233. 233. further reading...
  234. 234. •   Matt Gaunt – Touch Feedback for Mobile Sites •   Jonathan Stark – FastActive •   Stephen Woods – HTML5 Touch Interfaces •   YouTube: Stephen Woods – Responsive HTML5 Touch Interfaces •   Chris Wilson + Paul Kinlan – Touch And Mouse: Together Again For The First Time •   Ryan Fioravanti – Creating Fast Buttons for Mobile Web Applications •   Boris Smus – Multi-touch Web Development •   Boris Smus – Generalized input on the cross-device web •   Boris Smus – Interactive touch laptop experiments
  235. 235. •   Rick Byers + Boris Smus (Google I/O) – Point, Click, Tap, Touch - Building Multi-Device Web Interfaces •   Grant Goodale – Touch Events •   W3C – Touch Events Extensions •   Mozilla Developer Network – Touch Events •   WebPlatform.org – Pointer Events •   Rick Byers – The best way to avoid the dreaded 300ms click delay is to disable double-tap zoom •   Chromium Issue 152149: All touch-event related APIs should exist if touch support is enabled at runtime
  236. 236. •   Tim Kadlec – Avoiding the 300ms Click Delay, Accessibly •   David Rousset - Unifying touch and mouse [...] •   Microsoft – Pointer events updates (differences between IE10-IE11) •   Patrick H. Lauke – Webseiten zum Anfassen •   Patrick H. Lauke – Drei unter einem Dach: Pointer-Events für Maus, Stylus und Touchscreen •   Patrick H. Lauke – Make your site work on touch devices •   Stu Cox – You can't detect a touchscreen •   Tilo Mitra – The State of Gestures •   YouTube: Tilo Mitra (YUI) – The State of Gestures
  237. 237. •   Microsoft – Hover touch support (IE10/IE11) •   W3C Media Queries Level 4 – pointer •   Stu Cox – The Good & Bad of Level 4 Media Queries •   Peter-Paul Koch – Touch table •   Peter-Paul Koch – Preventing the touch default •   Peter-Paul Koch – Mouse event bubbling in iOS •   YouTube: Edge Conference (Feb 2013 London) – Panel: Input •   Edge Conference (Mar 2014 London) – Panel: Pointers and Interactions •   Trent Walton – Device-Agnostic
  238. 238. •   Stu Cox – The Golden Pattern for Handling Touch Input •   Matt Gaunt – ‘Focusing’ on the Web Today •   Mobiscroll – Working with touch events •   Peter-Paul Koch – The iOS event cascade and innerHTML •   Patrick H. Lauke – Make your site work on touch devices •   Scott Jehl (Filament Group) – Tappy: A custom tap event handler •   Yehuda Katz – Touch events on the web are fundamentally unfinished ...
  239. 239. •   Andrea Giammarchi – PointerEvents No More •   Google Developers – Web Fundamentals: Stateful Elements Respond to Touch •   YouTube: Matt Gaunt (Google) - Touch in a Web App? No Problem •   Luke Wroblewski – How to Communicate Hidden Gestures •   David Washington - Designing custom touch interactions •   David Washington - Building pull-to-refresh •   Andy Peatling - JavaScript Pull to Refresh for the Web
  240. 240. •   Rob Larsen - The Uncertain Web: Pointer Event Polyfill and Chrome Fragmentation •   Detlev Fisher - Implications of new input modes (touch, speech, gestures) for the Web Content Accessibility Guidelines •   Ralph Thomas - Towards declarative touch interactions •   Windows Dev Center: Windows desktop applications > Guidelines > Interaction (touch, keyboard, mouse, pen) •   Microsoft Open Technologies - jQuery Adopts Pointer Events
  241. 241. •   jQuery blog - Getting on Point •   IEBlog - Pointer Events W3C Recommendation, Interoperable Touch, and Removing the Dreaded 300ms Tap Delay •   Microsoft Open Technologies - Pointer Events is now a W3C Standard •   Patrick H. Lauke (The Paciello Group) - Pointer Events advance to W3C Recommendation •   Jacob Rossi - The Input Shouldn't Matter
  242. 242. youtube.com/watch?v=AZKpByV5764
  243. 243. get in touch @patrick_h_lauke github.com/patrickhlauke/touch patrickhlauke.github.io/getting-touchy-presentation slideshare.net/redux paciellogroup.com splintered.co.uk

×