Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Getting touchy - an introduction to touch and pointer events / JavaScript Days 2016

Getting touchy - an introduction to touch and pointer events / JavaScript Days 2016

Slides from my 1 day workshop at HTML5 Days / JavaScript Days in Munich, Germany, 22 March 2016

Beyond smartphones and tablets, touchscreens are finding their way into laptops and even desktop computers. With hardware support for touch becoming increasingly ubiquitous, it's time to explore what new possibilities are available to developers. This session will cover the basics of handling touch events - from making sure simple single-tap interactions are as responsive as possible, all the way to examples of full multitouch, gesture-enabled elements.

Evergreen slidedeck at https://patrickhlauke.github.io/getting-touchy-presentation/ / https://github.com/patrickhlauke/getting-touchy-presentation

357f279672db832fc41a5a2f36559fcb?s=128

Patrick H. Lauke

March 22, 2016
Tweet

Transcript

  1. getting touchy AN INTRODUCTION TO TOUCH AND POINTER EVENTS Patrick

    H. Lauke / Last major changes: 18 March 2016
  2. about me... •  senior accessibility consultant at The Paciello Group

    •  previously developer relations at Opera •  member of W3C Touch Events Community Group •  chair (since March 2016) of W3C Pointer Events Working Group
  3. github.com/patrickhlauke/getting-touchy-presentation "evergreen" expanded version of this presentation (and branches for

    specific conferences)
  4. patrickhlauke.github.io/touch

  5. None
  6. Touch/pointer events test results

  7. my JavaScript sucks... (but will hopefully convey the right concepts)

  8. “how can I make my website work on touch devices?”

  9. you don't need touch events browsers emulate regular mouse events

  10. patrickhlauke.github.io/touch/tests/event-listener_mouse-only.html

  11. patrickhlauke.github.io/touch/tests/event-listener_mouse-only.html

  12. compatibility mouse events (mouseenter) > mouseover > mousemove* > mousedown

    > (focus) > mouseup > click * only a single “sacrificial” mousemove event fired
  13. 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; subtle differences between browsers Mobile/tablet touchscreen activation/tap event order
  14. emulation works, but is limiting/problematic

  15. 1.  delayed event dispatch 2.  hover/mouseover interfaces 3.  mousemove doesn't

    track
  16. 1.  delayed event dispatch 2.  hover/mouseover interfaces 3.  mousemove doesn't

    track
  17. patrickhlauke.github.io/touch/tests/event-listener_show-delay.html

  18. patrickhlauke.github.io/touch/tests/event-listener_show-delay.html

  19. 1.  delayed event dispatch 2.  hover/mouseover interfaces 3.  mousemove doesn't

    track
  20. patrickhlauke.github.io/touch/css-dropdown/mouse-only.html

  21. 1.  delayed event dispatch 2.  hover/mouseover interfaces 3.  mousemove doesn't

    track
  22. patrickhlauke.github.io/touch/particle/2

  23. patrickhlauke.github.io/touch/particle/2

  24. “we need to go deeper...”

  25. touch events introduced by Apple, adopted in Chrome/Firefox/Opera (and belatedly

    IE/Edge – more on that later) www.w3.org/TR/touch-events
  26. caniuse.com: Can I use touch events?

  27. touchstart touchmove touchend touchcancel

  28. patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html

  29. patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html Bug 128534 - 'mouseenter' mouse compat event not fired...

  30. events fired on tap touchstart > [touchmove]+ > touchend >

    (mouseenter) > mouseover > mousemove > mousedown > (focus) > mouseup > click (mouse events only fired for single-finger tap)
  31. 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)
  32. •  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 touchmove •  differences in focus / blur and some mouse compatibility events (e.g. mouseenter / mouseleave ) •  some events may only fire when tapping away to another focusable element (e.g. blur ) some browsers outright weird...
  33. Browser/Android 4.3 mouseover > mousemove > touchstart > touchend >

    mousedown > mouseup > click Browser/Blackberry PlayBook 2.0 touchstart > mouseover > mousemove > mousedown > touchend > mouseup > click UC Browser 10.8/Android 6 mouseover > mousemove > touchstart > (touchmove)+ > touchend > mousedown > focus > mouseup > click
  34. Touch/pointer events test results

  35. shouldn't affect your code, unless you're expecting a very specific

    sequence...
  36. touch events vs limitations/problems

  37. 1.  delayed event dispatch 2.  hover/mouseover interfaces 3.  mousemove doesn't

    track
  38. 1.  delayed event dispatch 2.  hover/mouseover interfaces 3.  mousemove doesn't

    track
  39. patrickhlauke.github.io/touch/tests/event-listener_show-delay.html

  40. why the delay? double-tap to zoom (mostly anyway)

  41. when does the delay happen?

  42. patrickhlauke.github.io/touch/tests/event-listener.html

  43. patrickhlauke.github.io/touch/tests/event-listener.html

  44. touch / mouse events delay touchstart > [touchmove]+ > touchend

    > [300ms delay] (mouseenter) > mouseover > mousemove > mousedown > (focus) > mouseup > click
  45. “how can we make it feel responsive like a native

    app?”
  46. react to events fired before the 300ms delay...

  47. touchstart for an “immediate” control (e.g. fire/jump button on a

    game)
  48. touchend for a control that fires after finger lifted (but

    this can result in events firing after zoom/scroll)
  49. don't make it touch-exclusive

  50. interlude: simple feature detection for touch events

  51. /* 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 */
  52. /* common performance “trick” */ var clickEvent = ( 'ontouchstart'

    in window ? 'touchend' : 'click' ); blah.addEventListener( clickEvent , function() { ... }, false);
  53. /* common performance “trick” */ var clickEvent = ( 'ontouchstart'

    in window ? 'touchend' : 'click'); ... /* if touch events are supported, only listen to touchend, not click */
  54. hybrid devices touch + mouse + keyboard

  55. None
  56. None
  57. None
  58. patrickhlauke.github.io/touch/tests/event-listener_naive-touch-or-mouse.html

  59. Bug 888304 - touch-events on Firefox-desktop should be disabled until

    we can support them properly
  60. Issue 392584: TouchEvent API should be enabled consistently

  61. even on "mobile" we can have multiple inputs...

  62. None
  63. None
  64. Windows 10 "Continuum"

  65. Android + mouse – behaves like touch touchstart > touchend

    > mouseover > mousemove > mousedown > (focus) > mouseup > click
  66. Blackberry PlayBook 2.0 + mouse - like desktop mouseover >

    mousedown > (mousemove)+ > mouseup > click
  67. Blackberry Leap (BBOS 10.1) + mouse - like desktop mouseover

    > mousedown > (mousemove)+ > mouseup > click
  68. Windows 10 Mobile/Microsoft Edge + mouse - like desktop mouseover

    > mousedown > (mousemove)+ > mouseup > click
  69. Android + keyboard – like desktop keyboard (TAB / ENTER)

    focus / click
  70. iOS keyboard only works in same situations as on-screen keyboard

    (e.g. text inputs, URL entry)
  71. VoiceOver enables full keyboard access on iOS

  72. iOS + keyboard – similar to touch (TAB / ENTER)

    focus / touchstart > touchend > (mouseenter) > mouseover > mousemove > mousedown > blur > mouseup > click
  73. mobile Assistive Technologies (e.g. screen readers on touchscreen devices)

  74. iOS + VoiceOver (with/without keyboard) – similar to touch focus

    / touchstart > touchend > (mouseenter) > mouseover > mousemove > mousedown > blur > mouseup > click
  75. Android 4.3/Chrome + TalkBack – keyboard/mouse hybrid focus / blur

    > mousedown > mouseup > click > focus
  76. Android 6.1/Chrome + TalkBack – simulates touch touchstart > touchend

    > mouseover > mouseenter > mousemove > mousedown > focus > mouseup > click
  77. Android 6.1/Firefox + TalkBack – similar to touch touchstart >

    mousedown > focus > touchend > mouseup > click
  78. 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?
  79. no way to detect these cases...

  80. Modernizr.touch detects touch events not touch devices

  81. Stu Cox: You can't detect a touchscreen

  82. hacks.mozilla.org - Detecting touch [...]

  83. /* 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 ... */ }
  84. touch or mouse or keyboard

  85. touch and mouse and keyboard

  86. /* doubled-up event listeners */ foo.addEventListener(' touchend ', someFunction, false);

    foo.addEventListener(' click ', someFunction, false); /* but this would fire our function twice for touch? */ patrickhlauke.github.io/touch/tests/event-listener_naive-event-doubling.html
  87. /* doubled-up event listeners */ foo.addEventListener('touchend', function(e) { /* prevent

    mouse events + click */ e.preventDefault(); /* then trigger the function */ someFunction(e); }, false); foo.addEventListener('click', someFunction, false); patrickhlauke.github.io/touch/tests/event-listener_naive-event-doubling-fixed.html
  88. /* 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(); } ... }
  89. preventDefault() kills scrolling, pinch/zoom, etc

  90. apply preventDefault() carefully (just on buttons/links, not entire page)

  91. github.com/ftlabs/fastclick

  92. patrickhlauke.github.io/touch/fastclick YouTube: iOS/Safari 300ms click delay: vanilla Bootstrap and using

    fastclick.js
  93. patrickhlauke.github.io/touch/fastclick/fastclick.html YouTube: iOS/Safari 300ms click delay: vanilla Bootstrap and using

    fastclick.js
  94. browsers working to remove double-tap to zoom delay (when page

    not zoomable)
  95. <meta name="viewport" content="user-scalable=no"> patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html

  96. <meta name="viewport" content="user-scalable=no"> patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html

  97. ... content="minimum-scale=1, maximum-scale=1" patrickhlauke.github.io/touch/tests/event-listener_minimum-maximum-scale.html

  98. ... content="minimum-scale=1, maximum-scale=1" patrickhlauke.github.io/touch/tests/event-listener_minimum-maximum-scale.html

  99. Bug 922896 - Optimizations to remove 300ms [...] delay [RESOLVED

    FIXED]
  100. what about Apple?

  101. patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html

  102. iOS/Safari designed themselves into a corner: “double-tap to scroll” Bug

    122212 - Optimizations to remove 300ms touch > mouse events delay
  103. however, Apple did finally change its mind...

  104. Changeset 191072 - Web pages with unscalable viewports shouldn't have

    a single tap delay (change coming to iOS 9.3 – currently in beta)
  105. what about accessibility?

  106. None
  107. None
  108. None
  109. "Force enable zoom" reintroduces delay – a fair compromise? patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html

  110. "mobile optimised" viewport and "double-tap to zoom"

  111. Chrome 32+ / Android: content="width=device-width" suppresses double-tap-to-zoom, still allows pinch

    zoom Google Developers: 300ms tap delay, gone away
  112. Bug 941995 - Remove 300ms [...] on "responsive" pages [RESOLVED

    FIXED]
  113. Bug 150604 - Implement viewport-width-based fast-click heuristic (change coming to

    iOS 9.3 – currently in beta)
  114. Bug 151077 - Fast-clicking should trigger when scale is equal

    to explicitly set initial scale (change coming to iOS 9.3 – currently in beta)
  115. WebKit blog: More Responsive Tapping on iOS (change coming to

    iOS 9.3 – currently in beta)
  116. patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay

  117. 1.  delayed event dispatch 2.  hover/mouseover interfaces 3.  mousemove doesn't

    track
  118. patrickhlauke.github.io/touch/css-dropdown/mouse-only.html

  119. no concept of hover on touch devices iOS fakes it,

    Samsung Galaxy Note II/Pro + stylus, ...
  120. patrickhlauke.github.io/touch/css-dropdown/mouse-only.html

  121. patrickhlauke.github.io/touch/css-dropdown/mouse-only.html

  122. iOS "fakes" hover support: stops event sequence on content change

    iOS Developer Library - Safari Web Content Guide - Handling Events
  123. YouTube: Samsung Galaxy Note Pro 12.2 stylus hover ...but you

    can't rely on this, as most devices don't have it...
  124. Modernizr: Detecting a mouse user

  125. what about CSS4 Media Queries?

  126. W3C Media Queries Level 4 (Editor's Draft)

  127. /* MQ4 Interaction Media Features*/ pointer: none | coarse |

    fine hover: none | on-demand | hover any-pointer: none | coarse | fine any-hover: none | on-demand | hover
  128. dev.opera - Interaction Media Features and their potential (for incorrect

    assumptions)
  129. patrickhlauke.github.io/touch/pointer-hover-any-pointer-any-hover primary input is unchanged (and Chrome/Android required a full

    restart)
  130. /* Naive uses of Interaction Media Features */ @media (hover:

    hover) { /* primary input has hover...so we can rely on it? */ } @media (pointer: fine) { /* primary input has fine pointer precision... so make all buttons/controls small? */ } /* hover and pointer only check "primary" input, but what if there's a secondary input that lacks capabilities? */
  131. /* Better uses of Interaction Media Features */ @media (any-hover:

    none) { /* at least one input lacks hover capability... don't rely on it or avoid altogether */ } @media (any-pointer: coarse) { /* at least one input has coarse pointer precision... provide larger buttons/controls for touch */ } /* test for presence of *any* "least capable" input (primary or not) */
  132. detect which input the users is using right now...

  133. GitHub: ten1seven / what-input

  134. Demo: What Input?

  135. avoid hover/mouseover interfaces?

  136. complement for keyboard/touch!

  137. patrickhlauke.github.io/touch/css-dropdown/mouse-keyboard.html

  138. patrickhlauke.github.io/touch/css-dropdown/mouse-keyboard-touch.html

  139. 1.  delayed event dispatch 2.  hover/mouseover interfaces 3.  mousemove doesn't

    track
  140. patrickhlauke.github.io/touch/particle/2

  141. patrickhlauke.github.io/touch/particle/2

  142. 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
  143. doubling up handling of mousemove and touchmove

  144. var posX, posY; ... function positionHandler(e) { posX = e.clientX

    ; posY = e.clientY ; } ... canvas.addEventListener(' mousemove ', positionHandler, false);
  145. 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... */
  146. 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; // [DOM4] UI Events readonly attribute unsigned short buttons; }; www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MouseEvent www.w3.org/TR/uievents/#events-mouseevents
  147. 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
  148. 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
  149. 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
  150. TouchList differences touches all touch points on screen targetTouches all

    touch points that started on the element changedTouches touch points that caused the event to fire
  151. changedTouches depending on event: •  for touchstart , all new

    touch points that became active •  for touchmove , all touch points that changed/moved since last event •  for touchend / touchcancel , touch points that were removed (and are not active anymore at this point)
  152. patrickhlauke.github.io/touch/touchlist-objects

  153. 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 );
  154. TouchList collections order •  order of individual Touch objects in

    a TouchList can change •  e.g. targetTouches[0] not guaranteed to always be the same finger when dealing with multitouch •  not problematic for single-finger interactions, but use identifier property for each Touch to explicitly track a particular touch point / finger in multitouch
  155. patrickhlauke.github.io/touch/particle/3

  156. patrickhlauke.github.io/touch/particle/4a

  157. patrickhlauke.github.io/touch/paranoid_0.5 www.splintered.co.uk/experiments/archives/paranoid_0.5

  158. patrickhlauke.github.io/touch/picture-slider

  159. Basic mouse-driven fake slider Exercise/demo: expand mouse-driven code to also

    work with touch
  160. tracking finger movement over time ... swipe gestures

  161. patrickhlauke.github.io/touch/swipe

  162. patrickhlauke.github.io/touch/swipe

  163. don't forget mouse/keyboard!

  164. bradfrostweb.com/demo/mobile-first

  165. touchmove fires...a lot!

  166. do absolute minimum on each touchmove (usually: store coordinates)

  167. do heavy lifting (drawing etc.) separately, avoid queueing (e.g. using

    setTimeout and/or requestAnimationFrame )
  168. debounce / throttle events

  169. GitHub: m-gagne / limit.js

  170. Function.prototype.debounce = function (milliseconds, context) { var baseFunction = this,

    timer = null, wait = milliseconds; return function () { var self = context || this, args = arguments; function complete() { baseFunction.apply(self, args); timer = null; } if (timer) { clearTimeout(timer); } timer = setTimeout(complete, wait); }; }; window.addEventListener('touchmove', myFunction.debounce(250) );
  171. Function.prototype.throttle = function (milliseconds, context) { var baseFunction = this,

    lastEventTimestamp = null, limit = milliseconds; return function () { var self = context || this, args = arguments, now = Date.now(); if (!lastEventTimestamp || now - lastEventTimestamp >= limit) { lastEventTimestamp = now; baseFunction.apply(self, args); } }; }; window.addEventListener('touchmove', myFunction.throttle(250) );
  172. patrickhlauke.github.io/touch/touch-limit

  173. why stop at a single point? multitouch support

  174. 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
  175. /* iterate over touch array */ for (i=0; i< e.targetTouches

    .length; i++) { ... posX = e.targetTouches[i].clientX ; posY = e.targetTouches[i].clientY ; ... }
  176. patrickhlauke.github.io/touch/tracker/multi-touch-tracker.html

  177. iOS/iPad preventDefault() can't override 4-finger gestures

  178. iOS7+ Safari/WebView preventDefault() can't override edge swipes

  179. YouTube: iOS/Safari (iPhone) can't prevent edge swipe gestures

  180. Chrome/iOS (WebView) custom swipe, also can't be prevented patrickhlauke.github.io/touch/tracker/multi-touch-tracker.html

  181. multitouch gestures

  182. /* 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 */
  183. patrickhlauke.github.io/touch/iosgestures

  184. patrickhlauke.github.io/touch/iosgestures/image.html

  185. /* with some trigonometry we can replicate these from basic

    principles. */ var distance = Math.sqrt(Math.pow(...)+Math.pow(...)); var angle = Math.atan2(...);
  186. patrickhlauke.github.io/touch/pinch-zoom-rotate

  187. patrickhlauke.github.io/touch/picture-organiser

  188. not all old/cheap devices/OSs support multitouch!

  189. HTC Hero – Android 2.1

  190. LG Optimus 2X – Android 2.3.7

  191. ZTE Open – Firefox OS 1.1

  192. Touch Events specification grey areas...

  193. do touch events fire during scroll/zoom?

  194. not defined in spec, but de facto yes in most

    modern browsers patrickhlauke.github.io/touch/gesture-touch
  195. different models and behaviours, particularly in old browsers YouTube: Touch

    Events and scrolling/zooming (playlist)
  196. e.g. older versions of Chrome fire touchcancel on scroll/zoom YouTube:

    Google Developers - Mobile Web Thursdays: Performance on Mobile
  197. Google Developers: A More Compatible, Smoother Touch (lots more complexity

    / edge cases, particularly for old browsers/devices)
  198. non-standard iOS quirks...

  199. making generic elements clickable...

  200. iOS Developer Library - Safari Web Content Guide - Handling

    Events - Making Elements Clickable
  201. patrickhlauke.github.io/touch/ios-clickable/

  202. contrary to Apple's docs, onclick="" seems unnecessary (at least since

    iOS6, maybe earlier) patrickhlauke.github.io/touch/ios-clickable/
  203. mouse + click event bubbling on touch (important when using

    event delegation)
  204. Quirksmode: Mouse event bubbling in iOS

  205. patrickhlauke.github.io/touch/bubbling/button.html

  206. patrickhlauke.github.io/touch/bubbling/link.html

  207. patrickhlauke.github.io/touch/bubbling/div.html

  208. patrickhlauke.github.io/touch/bubbling/div-onclick-target.html

  209. patrickhlauke.github.io/touch/bubbling/div-onclick-ancestor.html

  210. patrickhlauke.github.io/touch/bubbling/div-addeventlistener-target.html

  211. patrickhlauke.github.io/touch/bubbling/div-addeventlistener-ancestor.html

  212. patrickhlauke.github.io/touch/bubbling/div-cursorpointer-target.html

  213. patrickhlauke.github.io/touch/bubbling/div-cursorpointer-ancestor.html

  214. mouse + click bubbling in iOS •  target element is

    a link or form control •  target or any ancestor (up to but not including body ) has explicit mouse or click handler (even if only empty function) •  target or any ancestor (up to and including document ) has cursor:pointer Quirksmode: Mouse event bubbling in iOS
  215. Touch Events extensions...

  216. W3C Touch Events Extensions WG Note

  217. /* Extension to touch objects */ partial interface Touch {

    readonly attribute float radiusX; readonly attribute float radiusY; readonly attribute float rotationAngle; readonly attribute float force; };
  218. Google Developers: Using rotationAngle and touchRadius

  219. /* Touch Events – contact geometry */ partial interface Touch

    { readonly attribute float radiusX ; readonly attribute float radiusY ; readonly attribute float rotationAngle ; readonly attribute float force; };
  220. patrickhlauke.github.io/touch/tracker/tracker-radius-rotationangle.html YouTube: Touch Events: radiusX, radiusY and rotationAngle

  221. Rick Byers - Paint (with rotationAngle and touchRadius)

  222. /* Touch Events – force */ partial interface Touch {

    readonly attribute float radiusX; readonly attribute float radiusY; readonly attribute float rotationAngle; readonly attribute float force ; }; force : value in range 0 – 1 . if no hardware support 0 (some devices, e.g. Nexus 10, "fake" force based on radiusX / radiusY )
  223. patrickhlauke.github.io/touch/tracker/tracker-force-pressure.html iPhone 6s with 3D Touch supports force ... (Safari

    and WKWebView, e.g. Chrome/iOS, but not UIWebView, e.g. Firefox/iOS)
  224. patrickhlauke.github.io/touch/tracker/tracker-force-pressure.html ...while in non-3D Touch models (e.g. iPhone 5c) force

    == 0
  225. 3D Touch ≠ Force Touch •  Force Touch is Apple's

    proprietary extension to mouse events •  only aimed at force-enabled trackpads (new Apple models) •  new events: webkitmouseforcewillbegin , webkitmouseforcedown , webkitmouseforceup , webkitmouseforcechanged •  mouse events have additional webkitForce property Safari Developer Library: Responding to Force Touch Events
  226. Google Developers: Precision Touch for Precise Gestures

  227. Bug 133180 - Consider exposing fractional Touch co-ordinates

  228. interface Touch { readonly attribute long identifier; readonly attribute EventTarget

    target; readonly attribute long float screenX; readonly attribute long float screenY; readonly attribute long float clientX; readonly attribute long float clientY; readonly attribute long float pageX; readonly attribute long float pageY; };
  229. W3C Touch Events Community Group

  230. W3C Web Events WG - Touch Events errata (early effort

    to clarify grey areas, simplify language used)
  231. W3C Touch Events - Level 2 (Editor's Draft) (merges errata,

    touch events extensions, fractional touch coordinates)
  232. what about Internet Explorer?

  233. up to IE9 (Win7 / WinPhone7.5) only mouse events

  234. in IE10 Microsoft introduced Pointer Events

  235. unifies mouse, touch and pen input into a single event

    model
  236. ...and some new inputs (though currently mapped to mouse) Building

    Xbox One Apps using HTML and JavaScript YouTube: Xbox One Edge Browser sends Pointer Events
  237. not just some “not invented here” technology

  238. submitted by Microsoft as W3C Candidate REC 09 May 2013

  239. Pointer Events - W3C REC 24 February 2015

  240. work now continues to enhance/expand Pointer Events... W3C Pointer Events

    - Level 2 (Editor's Draft)
  241. html5labs.interoperabilitybridges.com/prototypes/...

  242. Issue 162757: Implement pointer events in Chrome behind experimental flag

    (however, more on this later...)
  243. chrome.exe --enable-blink-features=PointerEvent

  244. Bug 822898 - Implement pointer events

  245. about:config / dom.w3c_pointer_events.enabled

  246. caniuse.com: Can I use pointer events?

  247. ...what about Apple?

  248. Bug 105463 - Implement pointer events RESOLVED WONTFIX

  249. Maciej Stachowiak - [webkit-dev] pointer events specification - first editors

    draft
  250. @patrick_h_lauke paraphrasing Apple's stance on Pointer Events...

  251. None
  252. Apple Pencil currently indistinguishable from touch in browser / JavaScript

    (no tilt information, fires touch events)
  253. the anatomy of Pointer Events (sequence, event object, ...)

  254. patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html

  255. patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html

  256. events fired on tap (IE10/IE11) mousemove* > pointerover > mouseover

    > pointerenter > mouseenter > pointerdown > mousedown > gotpointercapture > focus > pointermove > mousemove > pointerup > mouseup > lostpointercapture > pointerout > mouseout > pointerleave > mouseleave > click mouse events fired “inline” with pointer events (for a primary pointer, e.g. first finger on screen)
  257. current IE10/11 quirk ... pointerup > mouseup > lostpointercapture >

    pointerout > mouseout > pointerleave > mouseleave > click the fact that click comes last is a current IE10/11 quirk – according to spec it should come after pointerup > mouseup , and does already when using touch-action W3C Pointer Events WG mailing list - Jacob Rossi (Microsoft)
  258. patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html

  259. events fired on tap (Edge) mousemove* > pointerover > mouseover

    > pointerenter > mouseenter > pointerdown > mousedown > focus gotpointercapture > pointermove > mousemove > pointerup > mouseup > lostpointercapture > click > pointerout > mouseout > pointerleave > mouseleave note click fired correctly after pointerup in Microsoft Edge
  260. vendor­prefixed in IE10 MSPointerDown etc navigator.msMaxTouchPoints -ms-touch-action unprefixed in IE11

    (but prefixed versions still mapped for compatibility)
  261. /* 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 */
  262. simple feature detection for pointer events

  263. /* detecting pointer events support */ if ( window.PointerEvent )

    { /* some clever stuff here but this covers touch, stylus, mouse, etc */ } /* still listen to click for keyboard! */
  264. "don't forget about keyboard users" note in Pointer Events spec

  265. /* detect maximum number of touch points */ if (

    navigator.maxTouchPoints > 0 ) { /* device with a touchscreen */ } if ( navigator.maxTouchPoints > 1 ) { /* multitouch-capable device */ }
  266. are pointer events better?

  267. pointer events vs limitations/problems of mouse event emulation

  268. 1.  delayed event dispatch 2.  hover/mouseover interfaces 3.  mousemove doesn't

    track
  269. 1.  delayed event dispatch 2.  hover/mouseover interfaces 3.  mousemove doesn't

    track
  270. patrickhlauke.github.io/touch/tests/event-listener.html (IE11/WinPhone 8.1 Update no optimization for width=device-width )

  271. patrickhlauke.github.io/touch/tests/event-listener.html (IE/Win8 has double-tap to zoom, so problem on desktop

    too)
  272. patrickhlauke.github.io/touch/tests/event-listener.html (Microsoft Edge/Win10 has double-tap to zoom, so problem on

    desktop too)
  273. pointer / mouse events and delay ... [300ms delay] click

    ... 300ms delay just before click event
  274. “how can we make it feel responsive like a native

    app?”
  275. we could try a similar approach to touch events...

  276. •  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
  277. patrickhlauke.github.io/touch/tests/event-listener.html

  278. a more declarative approach with touch-action

  279. 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
  280. Pointer Events Level 2 (editor's draft) expanded set of values

    (useful for pull-to-refresh, carousels, etc) touch-action: auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] ] | manipulation w3c.github.io/pointerevents/#the-touch-action-css-property
  281. touch-action:none (suppress all default browser behaviour)

  282. patrickhlauke.github.io/touch/tests/event-listener_touch[...]

  283. patrickhlauke.github.io/touch/tests/event-listener_touch[...]

  284. touch-action:none kills scrolling, long-press, pinch/zoom

  285. touch-action:manipulation (suppress double-tap-to-zoom)

  286. patrickhlauke.github.io/touch/tests/event-listener_touch[...]

  287. patrickhlauke.github.io/touch/tests/event-listener_touch[...]

  288. Bug 979345 - Implement touch-action:manipulation [...]

  289. Issue 349016: Add support for touch-action:manipulation

  290. Bug 149854 - Implement touch-action: manipulation; for iOS

  291. caniuse.com: Can I use touch-action?

  292. browsers working to remove double-tap to zoom delay (when page

    not zoomable)
  293. <meta name="viewport" content="user-scalable=no"> patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html

  294. ... content="minimum-scale=1, maximum-scale=1" patrickhlauke.github.io/touch/tests/event-listener_minimum-maximum-scale.html

  295. None
  296. "Allow zooming on all web content" reintroduces delay patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html

  297. "Allow zooming on all web content" reintroduces delay patrickhlauke.github.io/touch/tests/event-listener_minimum-maximum-scale.html

  298. "Allow zooming..." option currently missing in Win 10 Mobile

  299. width=device-width still has delay in IE11/WinPhone 8.1 Update patrickhlauke.github.io/touch/tests/event-listener_width-device-width.html

  300. Microsoft Edge removes delay for width=device-width patrickhlauke.github.io/touch/tests/event-listener_width-device-width.html

  301. 1.  delayed event dispatch 2.  hover/mouseover interfaces 3.  mousemove doesn't

    track
  302. MSDN: Hover touch support

  303. MSDN: Using aria-haspopup to simulate hover on touch-enabled devices dirty/inappropriate

    hack, but interesting experiment nonetheless
  304. patrickhlauke.github.io/touch/css-dropdown/mouse-only-aria-haspopup.html

  305. Channel9 MSDN - IE11: Using Hover Menus with Touch tap-and-hold

    to trigger hover menus...
  306. 1.  delayed event dispatch 2.  hover/mouseover interfaces 3.  mousemove doesn't

    track
  307. patrickhlauke.github.io/touch/particle/2 mousemove / pointermove fire, but browser scroll action takes

    over
  308. you can "fake" it with touch-action:none and listen for mouse

    events...
  309. patrickhlauke.github.io/touch/particle/2a (does not work in Microsoft Edge/Windows 10 Mobile due

    to touch events support)
  310. better: just listen to pointermove...

  311. no need for separate mouse or touch event listeners

  312. /* touch events: separate handling */ foo.addEventListener('touchmove', ... , false);

    foo.addEventListener('mousemove', ... , false); /* pointer events: single listener for mouse, stylus, touch */ foo.addEventListener(' pointermove ', ... , false);
  313. no need for separate mouse or touch code to get

    x / y coords
  314. /* Pointer Events extend Mouse Events */ foo.addEventListener(' pointermove ',

    function(e) { ... posX = e.clientX ; posY = e.clientY ; ... }, false); www.w3.org/TR/pointerevents/#pointerevent-interface
  315. 3D Rotator by Creative Punch coded to only use mouse

    events
  316. 3D Rotator modified to use Pointer Events minimal code changes,

    as Pointer Events extend mouse events
  317. Basic mouse-driven fake slider Exercise/demo: convert mouse-driven code to use

    Pointer Events
  318. but you can distinguish mouse or touch or stylus

  319. foo.addEventListener('pointermove', function(e) { ... switch( e.pointerType ) { case '

    mouse ': ... break; case ' pen ': ... break; case ' touch ': ... break; default : /* future-proof */ } ... } , false);
  320. /* 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
  321. what about multitouch?

  322. /* 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 ': case ' pointercancel ': /* remove the relevant array entry */ break; }
  323. patrickhlauke.github.io/touch/tracker/multi-touch-tracker-pointer.html (note multiple isPrimary pointers, per pointer type)

  324. patrickhlauke.github.io/touch/tracker/multi-touch-tracker-pointer-hud.html

  325. 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)
  326. YouTube: Pointer Events support multiple stylus/pen inputs simultaneously

  327. /* 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
  328. extended capabilities (if supported by hardware)

  329. /* 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
  330. patrickhlauke.github.io/touch/tracker/... YouTube: Touch tracker with Surface 3 pen

  331. hovering stylus •  hardware-dependant •   pointermove fires •  

    pressure == 0 (non-active button state) •  track pointerdown / pointerup to be safe
  332. /* Pointer Events - contact geometry */ 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; } if hardware can't detect contact geometry, either 0 or "best guess" (e.g. for mouse/stylus, return width / height of 1 )
  333. patrickhlauke.github.io/touch/tracker/tracker-width-height.html YouTube: Pointer Events width and height ...

  334. patrickhlauke.github.io/touch/tracker/multi-touch-tracker-pointer-hud.html (Nokia Lumia 520: pressure is 0.5 - active state

    - and width / height is 0 )
  335. /* 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
  336. patrickhlauke.github.io/touch/pen-tracker YouTube: ...pen with tilt, pressure and hover support

  337. pointermove fires if any property changes, not just x/y position

    ( width , height , tiltX , tiltY , pressure )
  338. pointer capture (implicit vs explicit)

  339. •  touch events have implicit capture: once you start a

    touch movement on an element, events keep firing to the element even when moving outside the element's boundaries •  pointer events behave like mouse events: only fire events to an element while pointer (e.g. finger on touchscreen) inside element, but you can explicitly capture pointers
  340. /* events related to pointer capture */ gotpointercapture / lostpointercapture

    /* example of how to capture a pointer explicitly */ element.addEventListener('pointerdown', function(e) { this. setPointerCapture(e.pointerId) ; }, false } /* capture automatically released on pointerup / pointercancel or explicitly with releasePointerCapture() */ patrickhlauke.github.io/touch/tests/pointercapture.html
  341. pointer events as the future?

  342. Issue 162757: Implement pointer events in Chrome behind experimental flag

    WontFix
  343. YouTube: Google Developers - HTTP 203: Pointer Events

  344. 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
  345. 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...
  346. Jacob Rossi: comment on YouTube video 'HTTP 203: Pointer Events'

  347. Issue 404128: Extend TouchEvent API to have the power of

    PointerEvents...
  348. following developer outcry, Google reverted course

  349. None
  350. blink-dev › Intent to Implement: Pointer Events

  351. touch events in IE/Edge

  352. MSDN IEBlog: The Mobile Web should just work for everyone

    Windows Phone 8.1 Update now supports Pointer Events and Touch Events
  353. MSDN IEBlog: Making the web “just work” with any input:

    Mouse, Touch, and Pointer Events
  354. "frankensteining" pointer and touch events

  355. 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
  356. patrickhlauke.github.io/touch/tests/event-listener.html

  357. 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)
  358. patrickhlauke.github.io/touch/tests/event-listener.html

  359. events fired on tap (Edge 13) mousemove > pointerover >

    mouseover > pointerenter > mouseenter > pointerdown > touchstart > mousedown > focus gotpointercapture pointermove > mousemove > pointerup > touchend > mouseup > click > lostpointercapture > pointerout > mouseout > pointerleave > mouseleave essentially, relevant Touch Events after pointerdown and pointerup
  360. correctly fires touch events on scroll/zoom patrickhlauke.github.io/touch/gesture-touch/

  361. touch events only turned on for mobile

  362. W3C Touch Events WG mailing list Jacob Rossi - Enabling

    Touch Events everywhere
  363. about:flags in Microsoft Edge to turn on touch events on

    desktop (e.g. touch-enabled laptops)
  364. transitional event handling (until all browsers support pointer events)

  365. /* 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 */
  366. polyfills for pointer events (code for tomorrow, today)

  367. HandJS

  368. patrickhlauke.github.io/touch/handjs/listener/event-listener.html

  369. events fired on tap with HandJS touchstart > pointerover >

    pointerenter > pointerdown > [touchmove > pointermove ]+ > touchend > pointerup > pointerout > pointerleave > [300ms delay] pointerenter > mouseenter > mousemove* > mousedown > mouseup > click (not correct order, but close enough?)
  370. patrickhlauke.github.io/touch/handjs/tracker/tracker-just-pointer-handjs.html for all pointers isPrimary==true , touch-action ignored/broken (e.g. scrolling),

    can't handle touch and mouse simultaneously on touchscreen laptop
  371. Polymer

  372. GitHub - Polymer/PointerEvents

  373. GitHub - Polymer/PointerEvents deprecated

  374. jQuery blog - Improving the Pointer Events Polyfill

  375. GitHub - jQuery Pointer Events Polyfill (PEP)

  376. /* adding jQuery PEP */ <script src="https://code.jquery.com/pep/0.4.1/pep.js"></script> /* need to

    use custom touch-action attribute, not CSS (yet) */ <button touch-action="none" >...</div>
  377. Alex Schmitz' PEP demo

  378. patrickhlauke.github.io/touch/pep/listener/event-listener.html

  379. 3D Rotator modified to use Pointer Events minimal code changes,

    as Pointer Events extend mouse events
  380. 3D Rotator modified to use Pointer Events (and PEP)

  381. Basic pointer events-driven fake slider with setPointerCapture Exercise/demo: make slider

    work in non-Pointer-Events browsers
  382. events fired on tap with PEP pointerover > pointerenter >

    pointerdown > touchstart > pointerup > pointerout > pointerleave > touchend > mouseover > mouseenter > mousemove > mousedown > mouseup > click essentially, relevant Pointer Events before touchstart and touchend
  383. GitHub - IE-Touch polyfill opposite approach: polyfill touch events into

    IE (and Edge)
  384. ie­touch ­ useful or not? •  IE11/WinPhone8.1 and Edge/Win10Mobile now

    include touch events •  only needed for IE11/Edge on desktop/laptop with touch •  quick fix to enable existing/legacy touch events solutions(?)
  385. patrickhlauke.github.io/touch/ie-touch/listener/event-listener.html

  386. events fired on tap with ie­touch mousemove > pointerover >

    mouseover > pointerenter > mouseenter > pointerdown > touchstart > mousedown > gotpointercapture > focus > pointermove > touchmove mousemove > pointerup > touchend > mouseup > lostpointercapture > pointerout > mouseout > pointerleave > mouseleave > [300ms delay] click
  387. ie­touch peculiarities •   event object has no targetTouches TouchList

    •   touches acts as if it were targetTouches , so no touch points that didn't start on the element we're listening to are reported •   changedTouches seems to always contain same touch points as the touches TouchList
  388. utility libraries (because life is too short to hand-code gesture

    support)
  389. Hammer.js

  390. Hammer.js

  391. patrickhlauke.github.io/touch/swipe

  392. /* 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 */ });
  393. patrickhlauke.github.io/touch/hammer/swipe

  394. debugging/testing

  395. nothing beats having real devices...

  396. BrowserStack (includes Physical Devices)

  397. None
  398. Chrome DevTools / Remote Debugging on Android Chrome DevTools /

    Using the Console / Monitoring events
  399. enable touch events even without a touchscreen (to test "naive"

    'ontouchstart' in window code) chrome://flags/#touch-events
  400. Chrome DevTools / Device Mode & Mobile Emulation

  401. Bug 920956 - DevTools touch emulation: suppress regular mouse events

    ...
  402. no touch emulation, nor touch events + pointer events (like

    on real Windows 10 Mobile) emulation, in Edge/F12 Tools
  403. no touch emulation in Safari "Responsive Design Mode"

  404. bonus material

  405. Input Device Capabilities (Unofficial Draft)

  406. Input Device Capabilities •  currently limited usefulness - only has

    firesTouchEvents property •  limited use cases (see Identifying touch events that will trigger a tap / click, Identifying mouse events derived from touch events and Google Developer: Input Device Capabilities) •  easier to switch to Pointer Events (and add PEP)?
  407. myButton.addEventListener('touchstart', addHighlight, false); myButton.addEventListener('touchend', removeHighlight, false); myButton.addEventListener('mousedown', addHighlight, false); myButton.addEventListener('mouseup',

    removeHighlight, false); myButton.addEventListener('click', someFunction, false); /* addHighlight/removeHighlight will fire twice for touch (first for touch, then for mouse compatibility events); can't use e.preventDefault(), as we want to rely on 'click' */
  408. myButton.addEventListener('touchstart', addHighlight, false); myButton.addEventListener('touchend', removeHighlight, false); myButton.addEventListener('mousedown', function(e) { if

    (!e.sourceCapabilities.firesTouchEvents) { addHighlight(e); } } , false); myButton.addEventListener('mouseup', function(e) { if (!e.sourceCapabilities.firesTouchEvents) { removeHighlight(e); } } , false); myButton.addEventListener('click', someFunction, false); /* same function for touch and mouse, but if mouse check if source input fires touch events (i.e. this is a mouse compat event) */
  409. Leap Motion Controller

  410. YouTube: Leap Motion Controller tracker patrickhlauke.github.io/touch/leapmotion/tracker

  411. further reading...

  412. •  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
  413. •  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
  414. •  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 – Erweiterte Interaktionsmöglichkeiten mit Touchscreens •  Patrick H. Lauke – Make your site work on touch devices •  Stu Cox – You can't detect a touchscreen
  415. •  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
  416. •  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
  417. •  Andrea Giammarchi – PointerEvents No More •  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 •  Tilo Mitra – The State of Gestures •  YouTube: Tilo Mitra (YUI) – The State of Gestures
  418. •  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
  419. •  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 •  hacks.mozilla.org - Pointer Events now in Firefox Nightly
  420. •  Rick Byers – Interoperability Case Studies at BlinkOn 5

    (touch-action) •  Mozilla Developer Network – Pointer Events •  Christian Saylor – A Touch of Brilliance: Why 3D Touch Matters •  Lukas Mathis – Usability on Mobile Is Getting Worse •  Rocket Insights – Initial thoughts on 3D Touch •  Wiser Coder – Disable “pull to refresh” in Chrome for Android
  421. •  Google Developers / Web Fundamentals: Add touch to your

    site •  Alex Gibson – Different ways to trigger touchcancel in mobile browsers •  BBC Global Experience Language: How to design for touch •  Google BlinkOn 5: Lightning talks / Mustaq Ahmed – Pointer Events in Chrome implementation update •  A Book Apart: Josh Clark – Designing for Touch
  422. youtube.com/watch?v=AZKpByV5764

  423. get in touch @patrick_h_lauke github.com/patrickhlauke/touch patrickhlauke.github.io/getting-touchy-presentation slideshare.net/redux paciellogroup.com splintered.co.uk