Getting touchy - Introduction to touch (and pointer) events / jQuery Europe 2014 / Vienna 28.02.2014
21 likes11,522 views
The document discusses touch and pointer events on websites. It explains that browsers emulate mouse events on touch devices but this causes issues like delayed response. Native touch events were introduced to address these issues. The document then provides tips on how to optimize websites for both mouse and touch using techniques like touchstart/touchend event handling and preventing default actions.
![touchstart > [touchmove]+ > touchend >
(mouseenter) > mouseover >
mousemove > mousedown > (focus) >
mouseup > click
(mouse events only fired for single-finger tap)](https://image.slidesharecdn.com/jquery-europe28-140228001716-phpapp02/85/Getting-touchy-Introduction-to-touch-and-pointer-events-jQuery-Europe-2014-Vienna-28-02-2014-23-320.jpg)
![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)
too many touchmove events abort the tap (after touchend)
too many touchmove events on activatable elements lead to touchcancel
not all browsers consistently send the touchmove
some browsers outright weird...](https://image.slidesharecdn.com/jquery-europe28-140228001716-phpapp02/85/Getting-touchy-Introduction-to-touch-and-pointer-events-jQuery-Europe-2014-Vienna-28-02-2014-24-320.jpg)
![Bug 922896 - Optimizations to remove 300ms touch > mouse events delay
[RESOLVED - FIXED]](https://image.slidesharecdn.com/jquery-europe28-140228001716-phpapp02/85/Getting-touchy-Introduction-to-touch-and-pointer-events-jQuery-Europe-2014-Vienna-28-02-2014-68-320.jpg)
![touchstart > [touchmove]+ > touchend >
(mouseenter) > mouseover >
mousemove* > mousedown > (focus) >
mouseup > click
*mouse event emulation fires only a single mousemove](https://image.slidesharecdn.com/jquery-europe28-140228001716-phpapp02/85/Getting-touchy-Introduction-to-touch-and-pointer-events-jQuery-Europe-2014-Vienna-28-02-2014-83-320.jpg)
![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 );](https://image.slidesharecdn.com/jquery-europe28-140228001716-phpapp02/85/Getting-touchy-Introduction-to-touch-and-pointer-events-jQuery-Europe-2014-Vienna-28-02-2014-91-320.jpg)
![for (i=0; i<e.targetTouches.length; i++) {
...
posX = e.targetTouches[i].clientX;
posY = e.targetTouches[i].clientY;
...
}](https://image.slidesharecdn.com/jquery-europe28-140228001716-phpapp02/85/Getting-touchy-Introduction-to-touch-and-pointer-events-jQuery-Europe-2014-Vienna-28-02-2014-104-320.jpg)
![touch-action: auto|none|[pan-x][pan-y]
www.w3.org/TR/pointerevents/#the-touch-action-css-property
only prevents default touch action (e.g. double-tap to zoom)
does not stop synthetic mouse events nor click](https://image.slidesharecdn.com/jquery-europe28-140228001716-phpapp02/85/Getting-touchy-Introduction-to-touch-and-pointer-events-jQuery-Europe-2014-Vienna-28-02-2014-146-320.jpg)
![/* PointerEvents don't have the handy touch arrays,
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;
}](https://image.slidesharecdn.com/jquery-europe28-140228001716-phpapp02/85/Getting-touchy-Introduction-to-touch-and-pointer-events-jQuery-Europe-2014-Vienna-28-02-2014-152-320.jpg)
![touchstart > [touchmove]+ > touchend >
[300ms delay] > mouseenter > mouseover >
mousemove > mousedown > mouseup > click
+
mousemove > pointerover > mouseover >
pointerdown > mousedown > pointermove >
mousemove > pointerup > mouseup > pointerout >
mouseout > [300ms delay] > click](https://image.slidesharecdn.com/jquery-europe28-140228001716-phpapp02/85/Getting-touchy-Introduction-to-touch-and-pointer-events-jQuery-Europe-2014-Vienna-28-02-2014-157-320.jpg)
![Matt Gaunt – Touch Feedback for Mobile Sites
www.gauntface.co.uk/blog/2013/06/25/touch-feedback-for-mobile-sites
Jonathan Stark – FastActive
github.com/jonathanstark/FastActive
Stephen Woods – HTML5 Touch Interfaces
www.slideshare.net/ysaw/html5-touch-interfaces-sxsw-extended-version
David Rousset – Unifying touch and mouse: how Pointer Events will make cross-browsers touch support easy
blogs.msdn.com/b/davrous/archive/2013/02/20/handling-touch[...]
Chris Wilson + Paul Kinlan – Touch And Mouse: Together Again For The First Time
www.html5rocks.com/en/mobile/touchandmouse
Patrick H. Lauke – Webseiten zum Anfassen
webkrauts.de/artikel/2012/einfuehrung-touch-events
Ryan Fioravanti – Creating Fast Buttons for Mobile Web Applications
developers.google.com/mobile/articles/fast_buttons
Boris Smus – Multi-touch Web Development
www.html5rocks.com/en/mobile/touch
Boris Smus – Generalized input on the cross-device web
smus.com/mouse-touch-pointer](https://image.slidesharecdn.com/jquery-europe28-140228001716-phpapp02/85/Getting-touchy-Introduction-to-touch-and-pointer-events-jQuery-Europe-2014-Vienna-28-02-2014-171-320.jpg)
Getting touchy - Introduction to touch (and pointer) events / jQuery Europe 2014 / Vienna 28.02.2014
- 1. getting touchy AN INTRODUCTION TO TOUCH (AND POINTER) EVENTS Patrick H. Lauke / jQuery Europe / Vienna / 28 February 2014
- 3. “how can I make my website work on touch devices?”
- 4. you don't need touch events browsers emulate regular mouse events
- 6. (mouseenter) > mouseover > mousemove* > mousedown > (focus) > mouseup > click *only a single “sacrificial” event is fired
- 7. 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 Opera Mobile and Firefox mouseout not on iOS Safari and embedded WebView (e.g. iOS Chrome)
- 8. emulation works, but is limiting/problematic
- 9. 1. delayed event dispatch 2. mouse-specific interfaces 3. mousemove doesn't track
- 10. 1. delayed event dispatch 2. mouse-specific interfaces 3. mousemove doesn't track
- 13. 1. delayed event dispatch 2. mouse-specific interfaces 3. mousemove doesn't track
- 15. 1. delayed event dispatch 2. mouse-specific interfaces 3. mousemove doesn't track
- 17. patrickhlauke.github.io/touch/particle/2 (bug in iOS7: moving finger does seem to scroll and fire multiple mousemove events?!)
- 18. “we need to go deeper...”
- 19. touch events introduced in iOS 2.0, adopted in Chrome/Firefox/Opera www.w3.org/TR/touch-events
- 22. patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html Bug 128534 - 'mouseenter' mouse compat event not fired when listeners for touch events
- 23. touchstart > [touchmove]+ > touchend > (mouseenter) > mouseover > mousemove > mousedown > (focus) > mouseup > click (mouse events only fired for single-finger tap)
- 24. 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) too many touchmove events abort the tap (after touchend) too many touchmove events on activatable elements lead to touchcancel not all browsers consistently send the touchmove some browsers outright weird...
- 25. 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
- 27. 1. delayed event dispatch 2. mouse-specific interfaces 3. mousemove doesn't track
- 28. 1. delayed event dispatch 2. mouse-specific interfaces 3. mousemove doesn't track
- 31. why the delay? double-tap to zoom (mostly anyway)
- 32. what if browsers didn't wait?
- 33. Puffin/Android (popular in Korea?) puffinbrowser.com double-tap zooms and fires mouse events + click (also, doesn't support touch events at all)
- 34. when does the delay happen?
- 37. “how can we make it feel responsive like a native app?”
- 38. react to events fired before the 300ms delay...
- 39. touchstart for an “immediate” control touchend for a control that fires after finger lifted
- 40. interlude: simple feature detection for touch events
- 41. if ('ontouchstart' in window) { /* some clever stuff here */ } /* older browsers have flaky support so more hacky tests needed... use Modernizr.touch or similar */
- 42. /* common performance “trick” */ var clickEvent = ('ontouchstart' in window ? 'touchend' : 'click'); blah.addEventListener(clickEvent, function() { ... }, false);
- 43. don't make it touch-exclusive
- 45. if ('ontouchstart' in window) { /* browser supports touch events but user is not necessarily using touch (exclusively) */ }
- 46. hybrid devices touch + mouse + keyboard
- 49. Android + mouse – behaves like touch touchstart > touchend > mouseover > mousemove > mousedown > (focus) > mouseup > click
- 50. Android + keyboard – like desktop keyboard focus > click
- 51. VoiceOver enables keyboard access on iOS
- 52. iOS + keyboard – similar to touch focus > touchstart > touchend > (mouseenter) > mouseover > mousemove > mousedown blur > mouseup > click
- 53. iOS + VoiceOver – similar to touch focus > touchstart > touchend > (mouseenter) > mouseover > mousemove > mousedown blur > mouseup > click
- 54. Android + TalkBack – keyboard/mouse hybrid focus > blur > mousedown > mouseup > click > focus(?) (though seems a bit flakey...)
- 55. touch or mouse or keyboard
- 56. touch and mouse and keyboard
- 57. /* doubled-up event listeners */ foo.addEventListener('touchend', someFunction, false); foo.addEventListener('click', someFunction, false);
- 58. foo.addEventListener('touchstart', function(e) { /* prevent delay + mouse events */ e.preventDefault(); }, false); /* doubled-up event listeners */ foo.addEventListener('touchend', someFunction, false); foo.addEventListener('click', someFunction, false);
- 59. preventDefault can kill scrolling, pinch/zoom, etc on touchstart/touchmove
- 61. browsers working to remove delay when possible
- 68. Bug 922896 - Optimizations to remove 300ms touch > mouse events delay [RESOLVED - FIXED]
- 69. Chrome 32 for Android removes delay also when <meta name="viewport" content="width=device-width"> updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away
- 71. iOS/Safari designed themselves into a corner with “double-tap to scroll” bugs.webkit.org/show_bug.cgi?id=122212
- 72. 1. delayed event dispatch 2. mouse-specific interfaces 3. mousemove doesn't track
- 74. no isolated hover (or focus) on touch devices* * iOS fakes it, Samsung Galaxy S4 + stylus, ...
- 77. Modernizr issue 869: Detecting a mouse user
- 79. avoid hover-based interfaces? complement for keyboard / touch!
- 81. 1. delayed event dispatch 2. mouse-specific interfaces 3. mousemove doesn't track
- 83. touchstart > [touchmove]+ > touchend > (mouseenter) > mouseover > mousemove* > mousedown > (focus) > mouseup > click *mouse event emulation fires only a single mousemove
- 84. doubling up handling of mousemove and touchmove
- 85. var posX, posY; ... function positionHandler(e) { posX = e.clientX; posY = e.clientY; } ... canvas.addEventListener('mousemove', positionHandler, false);
- 86. var posX, posY; ... function positionHandler(e) { /* handle both mouse and touch? */ } ... canvas.addEventListener('mousemove', positionHandler, false); canvas.addEventListener('touchmove', positionHandler, false);
- 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. 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
- 89. interface Touch { readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute }; long EventTarget long long long long long long identifier; target; screenX; screenY; clientX; clientY; pageX; pageY; www.w3.org/TR/touch-events/#touch-interface
- 91. 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 );
- 93. tracking finger movement over time ... swipe gestures
- 99. do absolute minimum on each touchmove (usually: store new coordinates)
- 102. why stop at a single point? multitouch support
- 103. 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
- 104. for (i=0; i<e.targetTouches.length; i++) { ... posX = e.targetTouches[i].clientX; posY = e.targetTouches[i].clientY; ... }
- 106. iOS/iPad even preventDefault() can't override 4-finger gestures
- 107. iOS7/Safari even preventDefault() can't override back/forward swipe gestures
- 108. multitouch gestures
- 109. /* iOS/Safari has gesture events for size/rotation, not supported in Chrome/Firefox/Opera, not part of the W3C Touch Events spec. */ gesturestart, gesturechange, gestureend e.scale, e.rotation
- 110. /* with some trigonometry we can replicate these from basic principles. */ var distance = Math.sqrt(Math.pow(...)+Math.pow(...)); var angle = Math.atan2(...);
- 112. older/cheaper devices/OS versions and multitouch?
- 113. LG Optimus 2X – Android 2.3.7
- 114. ZTE Open – FirefoxOS 1.1
- 115. touch events and Internet Explorer...
- 116. blogs.msdn.com/...
- 118. not just some “not invented here” new approach for IE10+
- 123. ...what about Apple?
- 127. mousemove* > pointerover > mouseover > pointerenter > mouseenter > pointerdown > mousedown > pointermove > mousemove > gotpointercapture > focus > 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)
- 128. vendor-prefixed in IE10 MSPointerDown etc navigator.msMaxTouchPoints -ms-touch-action unprefixed in IE11
- 129. simple feature detection for pointer events
- 130. if (window.PointerEvent) { /* some clever stuff here but this covers touch, stylus, mouse, etc */ } /* still listen to click for keyboard! */
- 131. if (navigator.maxTouchPoints > 1) { /* multitouch-capable device */ }
- 133. no need for separate mouse or touch event listeners
- 134. /* touch events: separate handling */ foo.addEventListener('touchmove', ... , false); foo.addEventListener('mousemove', ... , false); /* pointer events: single listener for mouse, stylus, touch */ foo.addEventListener('pointermove', ... , false);
- 135. no need for separate mouse or touch code to get x / y coords
- 136. 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
- 137. /* Pointer Events extend Mouse Events vs Touch Events and their completely new objects/arrays */ interface PointerEvent : readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute }; MouseEvent { long pointerId; long width; long height; float pressure; long tiltX; long tiltY; DOMString pointerType; boolean isPrimary; www.w3.org/TR/pointerevents/#pointerevent-interface
- 138. but you can distinguish mouse or touch or stylus if needed
- 139. foo.addEventListener('pointermove', function(e) { ... switch(e.pointerType) { case 'mouse': ... break; case 'pen': ... break; case 'touch': ... break; default: /* future-proof */ ... } , false);
- 140. “how can we make it feel responsive like a native app?”
- 143. you can preventDefault() most mouse compatibility events on pointerdown ...but click is not considered mouse compatibility event, and the 300ms delay is not affected by this.
- 146. touch-action: auto|none|[pan-x][pan-y] www.w3.org/TR/pointerevents/#the-touch-action-css-property only prevents default touch action (e.g. double-tap to zoom) does not stop synthetic mouse events nor click
- 147. touch-action:none
- 151. /* PointerEvents don't have the handy touch arrays, so we have to replicate something similar... */
- 152. /* PointerEvents don't have the handy touch arrays, 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; }
- 154. /* 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? */
- 155. pointer events as the future?
- 157. touchstart > [touchmove]+ > touchend > [300ms delay] > mouseenter > mouseover > mousemove > mousedown > mouseup > click + mousemove > pointerover > mouseover > pointerdown > mousedown > pointermove > mousemove > pointerup > mouseup > pointerout > mouseout > [300ms delay] > click
- 159. polyfills for pointer events (code for tomorrow, today)
- 160. handjs.codeplex.com
- 162. utility libraries (because life is too short to hand-code gesture support etc)
- 164. jQuery Mobile? Sencha Touch? … check for support of IE10+ and “this is a touch device” assumptions
- 165. debugging/testing
- 166. Issue 181204: Emulate touch events - event order different from real devices
- 167. Bug 920956 - DevTools touch emulation: suppress regular mouse events ...
- 170. further reading...
- 171. Matt Gaunt – Touch Feedback for Mobile Sites www.gauntface.co.uk/blog/2013/06/25/touch-feedback-for-mobile-sites Jonathan Stark – FastActive github.com/jonathanstark/FastActive Stephen Woods – HTML5 Touch Interfaces www.slideshare.net/ysaw/html5-touch-interfaces-sxsw-extended-version David Rousset – Unifying touch and mouse: how Pointer Events will make cross-browsers touch support easy blogs.msdn.com/b/davrous/archive/2013/02/20/handling-touch[...] Chris Wilson + Paul Kinlan – Touch And Mouse: Together Again For The First Time www.html5rocks.com/en/mobile/touchandmouse Patrick H. Lauke – Webseiten zum Anfassen webkrauts.de/artikel/2012/einfuehrung-touch-events Ryan Fioravanti – Creating Fast Buttons for Mobile Web Applications developers.google.com/mobile/articles/fast_buttons Boris Smus – Multi-touch Web Development www.html5rocks.com/en/mobile/touch Boris Smus – Generalized input on the cross-device web smus.com/mouse-touch-pointer
- 172. Rick Byers + Boris Smus (Google I/O) – Point, Click, Tap, Touch - Building Multi-Device Web Interfaces developers.google.com/events/io/sessions/361772634 Grant Goodale – Touch Events www.w3.org/conf/2011/#Touch_Events W3C – Touch Events Extensions www.w3.org/TR/2013/NOTE-touch-events-extensions-20131031 Mozilla Developer Network – Touch Events developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/Touch_events WebPlatform.org – Pointer Events docs.webplatform.org/wiki/concepts/Pointer_Events Rick Byers – The best way to avoid the dreaded 300ms click delay is to disable double-tap zoom plus.google.com/+RickByers/posts/ej7nsuoaaDa Tim Kadlec – Avoiding the 300ms Click Delay, Accessibly timkadlec.com/2013/11/Avoiding-the-300ms-click-delay-accessibly Microsoft – Pointer events updates (differences between IE10 and IE11) msdn.microsoft.com/en-us/library/ie/dn304886(v=vs.85).aspx
- 173. Patrick H. Lauke – Webseiten zum Anfassen webkrauts.de/artikel/2012/einfuehrung-touch-events Patrick H. Lauke – Drei unter einem Dach: Pointer-Events für Maus, Stylus und Touchscreen webkrauts.de/artikel/2013/drei-unter-einem-dach Tilo Mitra – The State of Gestures speakerdeck.com/tilomitra/the-state-of-gestures Microsoft – Hover touch support (IE10/IE11) msdn.microsoft.com/en-us/library/ie/dn265029(v=vs.85).aspx Stu Cox – The Golden Pattern for Handling Touch Input www.stucox.com/blog/the-golden-pattern-for-handling-touch-input/ Peter-Paul Koch – Touch table www.quirksmode.org/mobile/tableTouch.html Peter-Paul Koch – Preventing the touch default www.quirksmode.org/mobile/default.html Peter-Paul Koch – Mouse event bubbling in iOS www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html