getting touchy
AN INTRODUCTION TO TOUCH AND POINTER EVENTS
Patrick H. Lauke / JavaScript Days / München / 7 März 2014
1. introduction
2. touch events
3. break
4. pointer events
5. debugging/testing
6. conclusion
patrickhlauke.github.io/touch
“how can I make my website
work on touch devices?”
you don't need touch events
browsers emulate regular mouse events
patrickhlauke.github.io/touch/tests/event-listener_mouse-only.html
patrickhlauke.github.io/touch/tests/event-listener_mouse-only.html
(mouseenter) > mouseover > mousemove* >
mousedown > (focus) > mouseup > click
*only a single “sacrificial” event is fired
on first tap
(mouseenter) > mouseover > mousemove >
mousedown > (focus) > mouseup > click
subsequent taps
mousemove > mous...
emulation works,
but is limiting/problematic
1. delayed event dispatch
2. mouse-specific interfaces
3. mousemove doesn't track
1. delayed event dispatch
2. mouse-specific interfaces
3. mousemove doesn't track
patrickhlauke.github.io/touch/tests/event-listener_show-delay.html
patrickhlauke.github.io/touch/tests/event-listener_show-delay.html
1. delayed event dispatch
2. mouse-specific interfaces
3. mousemove doesn't track
steamcommunity.com/id/redux_splintered/screenshots/?appid=238260
vimeo.com/ondemand
patrickhlauke.github.io/touch/css-dropdown/mouse-only.html
1. delayed event dispatch
2. mouse-specific interfaces
3. mousemove doesn't track
patrickhlauke.github.io/touch/particle/2
patrickhlauke.github.io/touch/particle/2
(bug in iOS7: moving finger does seem to scroll and fire multiple mousemove event...
“we need to go deeper...”
touch events
introduced in iOS 2.0, adopted in Chrome/Firefox/Opera
www.w3.org/TR/touch-events
touchstart
touchmove
touchend
touchcancel
touchenter
touchleave
patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html
patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html
Bug 128534 - 'mouseenter' mouse compat event not fi...
touchstart > [touchmove]+ > touchend >
(mouseenter) > mouseover >
mousemove > mousedown > (focus) >
mouseup > click
(mouse...
on first tap
touchstart > [touchmove]+ > touchend >
(mouseenter) > mouseover > mousemove > mousedown >
(focus) > mouseup >...
Browser/Android 4.3
(AppleWebKit/534.30)
mouseover > mousemove > touchstart > touchend > mousedown >
mouseup > click
Brows...
touch events
vs
limitations/problems
1. delayed event dispatch
2. mouse-specific interfaces
3. mousemove doesn't track
1. delayed event dispatch
2. mouse-specific interfaces
3. mousemove doesn't track
patrickhlauke.github.io/touch/tests/event-listener_show-delay.html
patrickhlauke.github.io/touch/tests/event-listener_show-delay.html
why the delay?
double-tap to zoom
(mostly anyway)
what if browsers didn't wait?
Puffin/Android (popular in Korea?) puffinbrowser.com
double-tap zooms and fires mouse events + click
(also, doesn't suppor...
UCWeb/Android (popular in China?) ucweb.com
no delay...but only because it doesn't implement double-tap to zoom
when does the delay happen?
patrickhlauke.github.io/touch/tests/event-listener.html
patrickhlauke.github.io/touch/tests/event-listener.html
“how can we make it feel
responsive like a native app?”
react to events fired before
the 300ms delay...
touchstart
for an “immediate” control
touchend
for a control that fires after finger lifted
interlude:
simple feature detection for
touch events
if ('ontouchstart' in window) {
/* some clever stuff here */
}
/* older browsers have flaky support
so more hacky tests ne...
/* common performance “trick” */
var clickEvent = ('ontouchstart' in window ?
'touchend' : 'click');
blah.addEventListener...
don't make it touch-exclusive
hacks.mozilla.org/2013/04/detecting-touch...
github.com/Modernizr/Modernizr/issues/548
if ('ontouchstart' in window) {
/* browser supports touch events
but user is not necessarily
using touch (exclusively) */
}
hybrid devices
touch + mouse + keyboard
patrickhlauke.github.io/touch/tests/event-listener_show-delay-naive-event-fix.html
bugzilla.mozilla.org/show_bug.cgi?id=888304
Android + mouse – behaves like touch
touchstart > touchend > mouseover > mousemove > mousedown >
(focus) > mouseup > click
Blackberry PlayBook 2.0 + mouse – like desktop mouse
mouseover > mousedown > mousemove > mouseup > click
Android + keyboard – like desktop keyboard
focus > click
VoiceOver enables keyboard access on iOS
iOS + keyboard – similar to touch
focus > touchstart > touchend >
(mouseenter) > mouseover > mousemove > mousedown
blur > ...
iOS + VoiceOver – similar to touch
focus > touchstart > touchend >
(mouseenter) > mouseover > mousemove > mousedown
blur >...
Android + TalkBack – keyboard/mouse hybrid
focus > blur > mousedown > mouseup > click > focus(?)
(though seems a bit flake...
touch or mouse or keyboard
touch and mouse and keyboard
/* doubled-up event listeners */
foo.addEventListener('touchend',
someFunction, false);
foo.addEventListener('click',
some...
foo.addEventListener('touchstart',
function(e) {
/* prevent delay + mouse events */
e.preventDefault();
}, false);
/* doub...
preventDefault
can kill scrolling, pinch/zoom, etc on
touchstart/touchmove
github.com/ftlabs/fastclick
browsers working to remove
delay when possible
patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html
patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html
patrickhlauke.github.io/touch/tests/event-listener_minimum-maximum-scale.html
patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html
patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html
patrickhlauke.github.io/touch/tests/event-listener_minimum-maximum-scale.html
Bug 922896 - Optimizations to remove 300ms touch > mouse events delay
[RESOLVED - FIXED]
Issue 169642: Remove ~300ms delay on tap for mobile sites [...]
[...] no more 300ms click delay, or double-tap zoom, on mobile websites
Chrome 32 for Android removes delay also when
<meta name="viewport" content="width=device-width">
updates.html5rocks.com/2...
patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html
iOS/Safari designed themselves into a corner
with “double-tap to scroll”
bugs.webkit.org/show_bug.cgi?id=122212
1. delayed event dispatch
2. mouse-specific interfaces
3. mousemove doesn't track
steamcommunity.com/id/redux_splintered/screenshots/?appid=238260
vimeo.com/ondemand
patrickhlauke.github.io/touch/css-dropdown/mouse-only.html
no isolated hover (or focus)
on touch devices*
* iOS fakes it, Samsung Galaxy S4 + stylus, ...
patrickhlauke.github.io/touch/css-dropdown/mouse-only.html
patrickhlauke.github.io/touch/css-dropdown/mouse-only.html
http://developer.apple.com/library/IOS/...
Modernizr issue 869: Detecting a mouse user
www.stucox.com/blog/you-cant-detect-a-touchscreen
avoid hover-based interfaces?
complement for keyboard / touch!
patrickhlauke.github.io/touch/css-dropdown/mouse-keyboard.html
patrickhlauke.github.io/touch/css-dropdown/mouse-keyboard.html
patrickhlauke.github.io/touch/css-dropdown/mouse-keyboard-touch.html
1. delayed event dispatch
2. mouse-specific interfaces
3. mousemove doesn't track
patrickhlauke.github.io/touch/particle/2
patrickhlauke.github.io/touch/particle/2
(bug in iOS7: moving finger does seem to scroll and fire multiple mousemove event...
touchstart > [touchmove]+ > touchend >
(mouseenter) > mouseover >
mousemove* > mousedown > (focus) >
mouseup > click
*mous...
doubling up handling of
mousemove and touchmove
var posX, posY;
...
function positionHandler(e) {
posX = e.clientX;
posY = e.clientY;
}
...
canvas.addEventListener('mouse...
var posX, posY;
...
function positionHandler(e) {
/* handle both mouse and touch? */
}
...
canvas.addEventListener('mousem...
interface MouseEvent : UIEvent {
readonly attribute long screenX;
readonly attribute long screenY;
readonly attribute long...
interface TouchEvent : UIEvent {
readonly attribute TouchList touches;
readonly attribute TouchList targetTouches;
readonl...
interface Touch {
readonly attribute long identifier;
readonly attribute EventTarget target;
readonly attribute long scree...
patrickhlauke.github.io/touch/touchlist-objects
var posX, posY;
...
function positionHandler(e) {
if ((e.clientX)&&(e.clientY)) {
posX = e.clientX;
posY = e.clientY;
} el...
patrickhlauke.github.io/touch/particle/3
patrickhlauke.github.io/touch/particle/4
www.splintered.co.uk/experiments/archives/paranoid_0.5
tracking finger movement
over time ... swipe gestures
patrickhlauke.github.io/touch/swipe
patrickhlauke.github.io/touch/swipe
patrickhlauke.github.io/touch/picture-slider
don't forget mouse/keyboard !
bradfrostweb.com/demo/mobile-first
touchmove fires...a lot!
do absolute minimum on each
touchmove
(usually: store new coordinates)
heavy JavaScript on
requestAnimationFrame
setInterval
patrickhlauke.github.io/touch/touch-limit
why stop at a single point?
multitouch support
interface TouchEvent : UIEvent {
readonly attribute TouchList touches;
readonly attribute TouchList targetTouches;
readonl...
for (i=0; i<e.targetTouches.length; i++) {
...
posX = e.targetTouches[i].clientX;
posY = e.targetTouches[i].clientY;
...
}
patrickhlauke.github.io/touch/tracker/multi-touch-tracker.html
iOS/iPad even preventDefault()
can't override 4-finger gestures
iOS7/Safari even preventDefault()
can't override back/forward swipe gestures
multitouch gestures
/* iOS/Safari has gesture events for size/rotation,
not supported in Chrome/Firefox/Opera,
not part of the W3C Touch Event...
patrickhlauke.github.io/touch/iosgestures
patrickhlauke.github.io/touch/iosgestures/image.html
/* with some trigonometry we can replicate these
from basic principles. */
var distance = Math.sqrt(Math.pow(...)+Math.pow...
patrickhlauke.github.io/touch/pinch-zoom-rotate
patrickhlauke.github.io/touch/picture-organiser
older/cheaper devices/OS versions
and multitouch?
HTC Hero – Android 2.1
LG Optimus 2X – Android 2.3.7
ZTE Open – FirefoxOS 1.1
touch events and
Internet Explorer...
blogs.msdn.com/...
www.w3.org/TR/pointerevents
not just some “not invented here”
new approach for IE10+
html5labs.interoperabilitybridges.com/prototypes/...
code.google.com/p/chromium/issues/detail?id=162757
bugzilla.mozilla.org/show_bug.cgi?id=822898
...what about Apple?
bugs.webkit.org/show_bug.cgi?id=105463
RESOLVED WONTFIX?!
patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html
patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html
mousemove* >
pointerover > mouseover >
pointerenter > mouseenter >
pointerdown > mousedown >
pointermove > mousemove >
got...
vendor-prefixed in IE10
MSPointerDown etc
navigator.msMaxTouchPoints
-ms-touch-action
unprefixed in IE11
interface MouseEvent : UIEvent {
readonly attribute long screenX;
readonly attribute long screenY;
readonly attribute long...
/* Pointer Events extend Mouse Events
vs Touch Events and their completely new objects/arrays */
interface PointerEvent : ...
simple feature detection for
pointer events
if (window.PointerEvent) {
/* some clever stuff here
but this covers touch,
stylus, mouse, etc */
}
/* still listen to cli...
if (navigator.maxTouchPoints > 1) {
/* multitouch-capable device */
}
patrickhlauke.github.io/touch/tests/pointer-multitouch-detect.html
no need for separate
mouse or touch
event listeners
/* touch events: separate handling */
foo.addEventListener('touchmove', ... , false);
foo.addEventListener('mousemove', .....
no need for separate
mouse or touch
code to get x / y coords
interface MouseEvent : UIEvent {
readonly attribute long screenX;
readonly attribute long screenY;
readonly attribute long...
/* Pointer Events extend Mouse Events
vs Touch Events and their completely new objects/arrays */
interface PointerEvent : ...
but you can distinguish
mouse or touch or stylus
if needed
foo.addEventListener('pointermove', function(e) {
...
switch(e.pointerType) {
case 'mouse':
...
break;
case 'pen':
...
bre...
pointer events
vs
limitations/problems
of mouse event emulation
1. delayed event dispatch
2. mouse-specific interfaces
3. mousemove doesn't track
1. delayed event dispatch
2. mouse-specific interfaces
3. mousemove doesn't track
patrickhlauke.github.io/touch/tests/event-listener_show-delay.html
patrickhlauke.github.io/touch/tests/event-listener_show-delay.html
patrickhlauke.github.io/touch/tests/event-listener.html
patrickhlauke.github.io/touch/tests/event-listener.html
patrickhlauke.github.io/touch/tests/event-listener.html
“how can we make it feel
responsive like a native app?”
patrickhlauke.github.io/touch/tests/event-listener.html
you can preventDefault()
most mouse compatibility events on pointerdown
...but click is not considered mouse compatibility...
patrickhlauke.github.io/touch/tests/event-listener.html
patrickhlauke.github.io/touch/tests/event-listener.html
touch-action: auto|none|[pan-x][pan-y]
www.w3.org/TR/pointerevents/#the-touch-action-css-property
only prevents default to...
touch-action:none
patrickhlauke.github.io/touch/tests/event-listener_touch-action-none.html
patrickhlauke.github.io/touch/tests/event-listener_touch-action-none.html
mousemove >
pointerover > mouseover >
pointerenter > mouseenter >
pointerdown > mousedown >
pointermove > mousemove >
gotp...
touch-action:none
kills scrolling, long-press,
pinch/zoom
1. delayed event dispatch
2. mouse-specific interfaces
3. mousemove doesn't track
msdn.microsoft.com/en-us/library/ie/dn265029(v=vs.85).aspx
msdn.microsoft.com/en-us/library/ie/jj152135(v=vs.85).aspx
patrickhlauke.github.io/touch/css-dropdown/mouse-only-aria-haspopup.html
channel9.msdn.com/Blogs/IE/IE11-Using-Hover-Menus-with-Touch
1. delayed event dispatch
2. mouse-specific interfaces
3. mousemove doesn't track
patrickhlauke.github.io/touch/particle/2
touch-action:none
patrickhlauke.github.io/touch/particle/2a
what about
multitouch?
patrickhlauke.github.io/touch/tracker/mouse-tracker_touch-action-none.html
/* PointerEvents don't have the handy touch arrays,
so we have to replicate something similar... */
/* PointerEvents don't have the handy touch arrays,
so we have to replicate something similar... */
var points = [];
switc...
patrickhlauke.github.io/touch/tracker/multi-touch-tracker-pointer.html
/* like iOS/Safari, IE10/Win has higher-level gestures,
but these are not part of the W3C Pointer Events spec.
Replicate t...
pointer events as the future?
what about backwards-
compatibility?
touchstart > [touchmove]+ > touchend >
[300ms delay] > mouseover > mousemove >
mousedown > mouseup > click
+
pointerover >...
www.w3.org/community/touchevents
polyfills for pointer events
(code for tomorrow, today)
handjs.codeplex.com
www.catuhe.com/msdn/handjs
github.com/Polymer/PointerEvents
www.polymer-project.org
utility libraries
(because life is too short to hand-code gesture support etc)
eightmedia.github.io/hammer.js
jQuery Mobile? Sencha Touch? …
check for support of IE10+ and “this is a touch device” assumptions
debugging/testing
Issue 181204: Emulate touch events - event order different from real devices
Bug 920956 - DevTools touch emulation: suppress regular mouse events ...
developers.google.com/chrome-developer-tools/docs/console#monitoring_events
developers.google.com/chrome-developer-tools/docs/remote-debugging
Bug 861876 - [...] multiple mousemoves being fired
Bug 861876 - [...] preventDefault on touchstart doesn't stop synthetic mouse events
further reading...
Matt Gaunt – Touch Feedback for Mobile Sites
www.gauntface.co.uk/blog/2013/06/25/touch-feedback-for-mobile-sites
Jonathan ...
Rick Byers + Boris Smus (Google I/O) – Point, Click, Tap, Touch - Building Multi-Device Web Interfaces
developers.google.c...
Patrick H. Lauke – Webseiten zum Anfassen
webkrauts.de/artikel/2012/einfuehrung-touch-events
Patrick H. Lauke – Drei unter...
youtube.com/watch?v=AZKpByV5764
get in touch
@patrick_h_lauke
github.com/patrickhlauke/touch
slideshare.net/redux
paciellogroup.com
splintered.co.uk
Getting touchy - an introduction to touch and pointer events (Workshop) / JavaScript Days / Munich / 07.03.2014
Getting touchy - an introduction to touch and pointer events (Workshop) / JavaScript Days / Munich / 07.03.2014
Getting touchy - an introduction to touch and pointer events (Workshop) / JavaScript Days / Munich / 07.03.2014
Getting touchy - an introduction to touch and pointer events (Workshop) / JavaScript Days / Munich / 07.03.2014
Upcoming SlideShare
Loading in …5
×

Getting touchy - an introduction to touch and pointer events (Workshop) / JavaScript Days / Munich / 07.03.2014

956 views

Published on

Published in: Technology
  • Be the first to comment

Getting touchy - an introduction to touch and pointer events (Workshop) / JavaScript Days / Munich / 07.03.2014

  1. 1. getting touchy AN INTRODUCTION TO TOUCH AND POINTER EVENTS Patrick H. Lauke / JavaScript Days / München / 7 März 2014
  2. 2. 1. introduction 2. touch events 3. break 4. pointer events 5. debugging/testing 6. conclusion
  3. 3. patrickhlauke.github.io/touch
  4. 4. “how can I make my website work on touch devices?”
  5. 5. you don't need touch events browsers emulate regular mouse events
  6. 6. patrickhlauke.github.io/touch/tests/event-listener_mouse-only.html
  7. 7. patrickhlauke.github.io/touch/tests/event-listener_mouse-only.html
  8. 8. (mouseenter) > mouseover > mousemove* > mousedown > (focus) > mouseup > click *only a single “sacrificial” event is fired
  9. 9. 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)
  10. 10. emulation works, but is limiting/problematic
  11. 11. 1. delayed event dispatch 2. mouse-specific interfaces 3. mousemove doesn't track
  12. 12. 1. delayed event dispatch 2. mouse-specific interfaces 3. mousemove doesn't track
  13. 13. patrickhlauke.github.io/touch/tests/event-listener_show-delay.html
  14. 14. patrickhlauke.github.io/touch/tests/event-listener_show-delay.html
  15. 15. 1. delayed event dispatch 2. mouse-specific interfaces 3. mousemove doesn't track
  16. 16. steamcommunity.com/id/redux_splintered/screenshots/?appid=238260
  17. 17. vimeo.com/ondemand
  18. 18. patrickhlauke.github.io/touch/css-dropdown/mouse-only.html
  19. 19. 1. delayed event dispatch 2. mouse-specific interfaces 3. mousemove doesn't track
  20. 20. patrickhlauke.github.io/touch/particle/2
  21. 21. patrickhlauke.github.io/touch/particle/2 (bug in iOS7: moving finger does seem to scroll and fire multiple mousemove events?!)
  22. 22. “we need to go deeper...”
  23. 23. touch events introduced in iOS 2.0, adopted in Chrome/Firefox/Opera www.w3.org/TR/touch-events
  24. 24. touchstart touchmove touchend touchcancel touchenter touchleave
  25. 25. patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html
  26. 26. patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html Bug 128534 - 'mouseenter' mouse compat event not fired when listeners for touch events
  27. 27. touchstart > [touchmove]+ > touchend > (mouseenter) > mouseover > mousemove > mousedown > (focus) > mouseup > click (mouse events only fired for single-finger tap)
  28. 28. 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...
  29. 29. 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
  30. 30. touch events vs limitations/problems
  31. 31. 1. delayed event dispatch 2. mouse-specific interfaces 3. mousemove doesn't track
  32. 32. 1. delayed event dispatch 2. mouse-specific interfaces 3. mousemove doesn't track
  33. 33. patrickhlauke.github.io/touch/tests/event-listener_show-delay.html
  34. 34. patrickhlauke.github.io/touch/tests/event-listener_show-delay.html
  35. 35. why the delay? double-tap to zoom (mostly anyway)
  36. 36. what if browsers didn't wait?
  37. 37. Puffin/Android (popular in Korea?) puffinbrowser.com double-tap zooms and fires mouse events + click (also, doesn't support touch events at all)
  38. 38. UCWeb/Android (popular in China?) ucweb.com no delay...but only because it doesn't implement double-tap to zoom
  39. 39. when does the delay happen?
  40. 40. patrickhlauke.github.io/touch/tests/event-listener.html
  41. 41. patrickhlauke.github.io/touch/tests/event-listener.html
  42. 42. “how can we make it feel responsive like a native app?”
  43. 43. react to events fired before the 300ms delay...
  44. 44. touchstart for an “immediate” control touchend for a control that fires after finger lifted
  45. 45. interlude: simple feature detection for touch events
  46. 46. if ('ontouchstart' in window) { /* some clever stuff here */ } /* older browsers have flaky support so more hacky tests needed... use Modernizr.touch or similar */
  47. 47. /* common performance “trick” */ var clickEvent = ('ontouchstart' in window ? 'touchend' : 'click'); blah.addEventListener(clickEvent, function() { ... }, false);
  48. 48. don't make it touch-exclusive
  49. 49. hacks.mozilla.org/2013/04/detecting-touch...
  50. 50. github.com/Modernizr/Modernizr/issues/548
  51. 51. if ('ontouchstart' in window) { /* browser supports touch events but user is not necessarily using touch (exclusively) */ }
  52. 52. hybrid devices touch + mouse + keyboard
  53. 53. patrickhlauke.github.io/touch/tests/event-listener_show-delay-naive-event-fix.html
  54. 54. bugzilla.mozilla.org/show_bug.cgi?id=888304
  55. 55. Android + mouse – behaves like touch touchstart > touchend > mouseover > mousemove > mousedown > (focus) > mouseup > click
  56. 56. Blackberry PlayBook 2.0 + mouse – like desktop mouse mouseover > mousedown > mousemove > mouseup > click
  57. 57. Android + keyboard – like desktop keyboard focus > click
  58. 58. VoiceOver enables keyboard access on iOS
  59. 59. iOS + keyboard – similar to touch focus > touchstart > touchend > (mouseenter) > mouseover > mousemove > mousedown blur > mouseup > click
  60. 60. iOS + VoiceOver – similar to touch focus > touchstart > touchend > (mouseenter) > mouseover > mousemove > mousedown blur > mouseup > click
  61. 61. Android + TalkBack – keyboard/mouse hybrid focus > blur > mousedown > mouseup > click > focus(?) (though seems a bit flakey...)
  62. 62. touch or mouse or keyboard
  63. 63. touch and mouse and keyboard
  64. 64. /* doubled-up event listeners */ foo.addEventListener('touchend', someFunction, false); foo.addEventListener('click', someFunction, false);
  65. 65. 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);
  66. 66. preventDefault can kill scrolling, pinch/zoom, etc on touchstart/touchmove
  67. 67. github.com/ftlabs/fastclick
  68. 68. browsers working to remove delay when possible
  69. 69. patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html
  70. 70. patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html
  71. 71. patrickhlauke.github.io/touch/tests/event-listener_minimum-maximum-scale.html
  72. 72. patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html
  73. 73. patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html
  74. 74. patrickhlauke.github.io/touch/tests/event-listener_minimum-maximum-scale.html
  75. 75. Bug 922896 - Optimizations to remove 300ms touch > mouse events delay [RESOLVED - FIXED]
  76. 76. Issue 169642: Remove ~300ms delay on tap for mobile sites [...]
  77. 77. [...] no more 300ms click delay, or double-tap zoom, on mobile websites
  78. 78. 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
  79. 79. patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html
  80. 80. iOS/Safari designed themselves into a corner with “double-tap to scroll” bugs.webkit.org/show_bug.cgi?id=122212
  81. 81. 1. delayed event dispatch 2. mouse-specific interfaces 3. mousemove doesn't track
  82. 82. steamcommunity.com/id/redux_splintered/screenshots/?appid=238260
  83. 83. vimeo.com/ondemand
  84. 84. patrickhlauke.github.io/touch/css-dropdown/mouse-only.html
  85. 85. no isolated hover (or focus) on touch devices* * iOS fakes it, Samsung Galaxy S4 + stylus, ...
  86. 86. patrickhlauke.github.io/touch/css-dropdown/mouse-only.html
  87. 87. patrickhlauke.github.io/touch/css-dropdown/mouse-only.html
  88. 88. http://developer.apple.com/library/IOS/...
  89. 89. Modernizr issue 869: Detecting a mouse user
  90. 90. www.stucox.com/blog/you-cant-detect-a-touchscreen
  91. 91. avoid hover-based interfaces? complement for keyboard / touch!
  92. 92. patrickhlauke.github.io/touch/css-dropdown/mouse-keyboard.html
  93. 93. patrickhlauke.github.io/touch/css-dropdown/mouse-keyboard.html
  94. 94. patrickhlauke.github.io/touch/css-dropdown/mouse-keyboard-touch.html
  95. 95. 1. delayed event dispatch 2. mouse-specific interfaces 3. mousemove doesn't track
  96. 96. patrickhlauke.github.io/touch/particle/2
  97. 97. patrickhlauke.github.io/touch/particle/2 (bug in iOS7: moving finger does seem to scroll and fire multiple mousemove events?!)
  98. 98. touchstart > [touchmove]+ > touchend > (mouseenter) > mouseover > mousemove* > mousedown > (focus) > mouseup > click *mouse event emulation fires only a single mousemove
  99. 99. doubling up handling of mousemove and touchmove
  100. 100. var posX, posY; ... function positionHandler(e) { posX = e.clientX; posY = e.clientY; } ... canvas.addEventListener('mousemove', positionHandler, false);
  101. 101. var posX, posY; ... function positionHandler(e) { /* handle both mouse and touch? */ } ... canvas.addEventListener('mousemove', positionHandler, false); canvas.addEventListener('touchmove', positionHandler, false);
  102. 102. 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
  103. 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. 104. 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
  105. 105. patrickhlauke.github.io/touch/touchlist-objects
  106. 106. 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 );
  107. 107. patrickhlauke.github.io/touch/particle/3
  108. 108. patrickhlauke.github.io/touch/particle/4
  109. 109. www.splintered.co.uk/experiments/archives/paranoid_0.5
  110. 110. tracking finger movement over time ... swipe gestures
  111. 111. patrickhlauke.github.io/touch/swipe
  112. 112. patrickhlauke.github.io/touch/swipe
  113. 113. patrickhlauke.github.io/touch/picture-slider
  114. 114. don't forget mouse/keyboard !
  115. 115. bradfrostweb.com/demo/mobile-first
  116. 116. touchmove fires...a lot!
  117. 117. do absolute minimum on each touchmove (usually: store new coordinates)
  118. 118. heavy JavaScript on requestAnimationFrame setInterval
  119. 119. patrickhlauke.github.io/touch/touch-limit
  120. 120. why stop at a single point? multitouch support
  121. 121. 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
  122. 122. for (i=0; i<e.targetTouches.length; i++) { ... posX = e.targetTouches[i].clientX; posY = e.targetTouches[i].clientY; ... }
  123. 123. patrickhlauke.github.io/touch/tracker/multi-touch-tracker.html
  124. 124. iOS/iPad even preventDefault() can't override 4-finger gestures
  125. 125. iOS7/Safari even preventDefault() can't override back/forward swipe gestures
  126. 126. multitouch gestures
  127. 127. /* 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
  128. 128. patrickhlauke.github.io/touch/iosgestures
  129. 129. patrickhlauke.github.io/touch/iosgestures/image.html
  130. 130. /* with some trigonometry we can replicate these from basic principles. */ var distance = Math.sqrt(Math.pow(...)+Math.pow(...)); var angle = Math.atan2(...);
  131. 131. patrickhlauke.github.io/touch/pinch-zoom-rotate
  132. 132. patrickhlauke.github.io/touch/picture-organiser
  133. 133. older/cheaper devices/OS versions and multitouch?
  134. 134. HTC Hero – Android 2.1
  135. 135. LG Optimus 2X – Android 2.3.7
  136. 136. ZTE Open – FirefoxOS 1.1
  137. 137. touch events and Internet Explorer...
  138. 138. blogs.msdn.com/...
  139. 139. www.w3.org/TR/pointerevents
  140. 140. not just some “not invented here” new approach for IE10+
  141. 141. html5labs.interoperabilitybridges.com/prototypes/...
  142. 142. code.google.com/p/chromium/issues/detail?id=162757
  143. 143. bugzilla.mozilla.org/show_bug.cgi?id=822898
  144. 144. ...what about Apple?
  145. 145. bugs.webkit.org/show_bug.cgi?id=105463 RESOLVED WONTFIX?!
  146. 146. patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html
  147. 147. patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html
  148. 148. 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)
  149. 149. vendor-prefixed in IE10 MSPointerDown etc navigator.msMaxTouchPoints -ms-touch-action unprefixed in IE11
  150. 150. 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
  151. 151. /* 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; }; www.w3.org/TR/pointerevents/#pointerevent-interface
  152. 152. simple feature detection for pointer events
  153. 153. if (window.PointerEvent) { /* some clever stuff here but this covers touch, stylus, mouse, etc */ } /* still listen to click for keyboard! */
  154. 154. if (navigator.maxTouchPoints > 1) { /* multitouch-capable device */ }
  155. 155. patrickhlauke.github.io/touch/tests/pointer-multitouch-detect.html
  156. 156. no need for separate mouse or touch event listeners
  157. 157. /* touch events: separate handling */ foo.addEventListener('touchmove', ... , false); foo.addEventListener('mousemove', ... , false); /* pointer events: single listener for mouse, stylus, touch */ foo.addEventListener('pointermove', ... , false);
  158. 158. no need for separate mouse or touch code to get x / y coords
  159. 159. 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
  160. 160. /* 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; }; www.w3.org/TR/pointerevents/#pointerevent-interface
  161. 161. but you can distinguish mouse or touch or stylus if needed
  162. 162. foo.addEventListener('pointermove', function(e) { ... switch(e.pointerType) { case 'mouse': ... break; case 'pen': ... break; case 'touch': ... break; default: /* future-proof */ ... } , false);
  163. 163. pointer events vs limitations/problems of mouse event emulation
  164. 164. 1. delayed event dispatch 2. mouse-specific interfaces 3. mousemove doesn't track
  165. 165. 1. delayed event dispatch 2. mouse-specific interfaces 3. mousemove doesn't track
  166. 166. patrickhlauke.github.io/touch/tests/event-listener_show-delay.html
  167. 167. patrickhlauke.github.io/touch/tests/event-listener_show-delay.html
  168. 168. patrickhlauke.github.io/touch/tests/event-listener.html
  169. 169. patrickhlauke.github.io/touch/tests/event-listener.html
  170. 170. patrickhlauke.github.io/touch/tests/event-listener.html
  171. 171. “how can we make it feel responsive like a native app?”
  172. 172. patrickhlauke.github.io/touch/tests/event-listener.html
  173. 173. 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.
  174. 174. patrickhlauke.github.io/touch/tests/event-listener.html
  175. 175. patrickhlauke.github.io/touch/tests/event-listener.html
  176. 176. 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
  177. 177. touch-action:none
  178. 178. patrickhlauke.github.io/touch/tests/event-listener_touch-action-none.html
  179. 179. patrickhlauke.github.io/touch/tests/event-listener_touch-action-none.html
  180. 180. mousemove > pointerover > mouseover > pointerenter > mouseenter > pointerdown > mousedown > pointermove > mousemove > gotpointercapture > focus > pointerup > mouseup > click > lostpointercapture > pointerout > mouseout > pointerleave > mouseleave
  181. 181. touch-action:none kills scrolling, long-press, pinch/zoom
  182. 182. 1. delayed event dispatch 2. mouse-specific interfaces 3. mousemove doesn't track
  183. 183. msdn.microsoft.com/en-us/library/ie/dn265029(v=vs.85).aspx
  184. 184. msdn.microsoft.com/en-us/library/ie/jj152135(v=vs.85).aspx
  185. 185. patrickhlauke.github.io/touch/css-dropdown/mouse-only-aria-haspopup.html
  186. 186. channel9.msdn.com/Blogs/IE/IE11-Using-Hover-Menus-with-Touch
  187. 187. 1. delayed event dispatch 2. mouse-specific interfaces 3. mousemove doesn't track
  188. 188. patrickhlauke.github.io/touch/particle/2
  189. 189. touch-action:none
  190. 190. patrickhlauke.github.io/touch/particle/2a
  191. 191. what about multitouch?
  192. 192. patrickhlauke.github.io/touch/tracker/mouse-tracker_touch-action-none.html
  193. 193. /* PointerEvents don't have the handy touch arrays, so we have to replicate something similar... */
  194. 194. /* 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; }
  195. 195. patrickhlauke.github.io/touch/tracker/multi-touch-tracker-pointer.html
  196. 196. /* 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? */
  197. 197. pointer events as the future?
  198. 198. what about backwards- compatibility?
  199. 199. touchstart > [touchmove]+ > touchend > [300ms delay] > mouseover > mousemove > mousedown > mouseup > click + pointerover > mouseover > pointerdown > mousedown > pointermove > mousemove > pointerup > mouseup > pointerout > mouseout > [300ms delay] > click
  200. 200. www.w3.org/community/touchevents
  201. 201. polyfills for pointer events (code for tomorrow, today)
  202. 202. handjs.codeplex.com
  203. 203. www.catuhe.com/msdn/handjs
  204. 204. github.com/Polymer/PointerEvents
  205. 205. www.polymer-project.org
  206. 206. utility libraries (because life is too short to hand-code gesture support etc)
  207. 207. eightmedia.github.io/hammer.js
  208. 208. jQuery Mobile? Sencha Touch? … check for support of IE10+ and “this is a touch device” assumptions
  209. 209. debugging/testing
  210. 210. Issue 181204: Emulate touch events - event order different from real devices
  211. 211. Bug 920956 - DevTools touch emulation: suppress regular mouse events ...
  212. 212. developers.google.com/chrome-developer-tools/docs/console#monitoring_events
  213. 213. developers.google.com/chrome-developer-tools/docs/remote-debugging
  214. 214. Bug 861876 - [...] multiple mousemoves being fired
  215. 215. Bug 861876 - [...] preventDefault on touchstart doesn't stop synthetic mouse events
  216. 216. further reading...
  217. 217. 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
  218. 218. 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
  219. 219. 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
  220. 220. youtube.com/watch?v=AZKpByV5764
  221. 221. get in touch @patrick_h_lauke github.com/patrickhlauke/touch slideshare.net/redux paciellogroup.com splintered.co.uk

×