getting touchy
AN INTRODUCTION TO TOUCH (AND POINTER) EVENTS

Patrick H. Lauke / jQuery Europe / Vienna / 28 February 2014
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
(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 > mou...
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
vimeo.com/ondemand
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

Brow...
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...
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...
if ('ontouchstart' in window) {
/* browser supports touch events
but user is not necessarily
using touch (exclusively) */
...
hybrid devices
touch + mouse + keyboard
Android + mouse – behaves like touch
touchstart > touchend > mouseover > mousemove > mousedown >
(focus) > 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 flak...
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_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]
Chrome 32 for Android removes delay also when
<meta name="viewport" content="width=device-width">

updates.html5rocks.com/...
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
vimeo.com/ondemand
no isolated hover (or focus)
on touch devices*
* iOS fakes it, Samsung Galaxy S4 + stylus, ...
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-touch.html
1. delayed event dispatch
2. mouse-specific interfaces
3. mousemove doesn't track
patrickhlauke.github.io/touch/particle/2
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
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly ...
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
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 !
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...
/* with some trigonometry we can replicate these
from basic principles. */
var distance = Math.sqrt(Math.pow(...)+Math.pow...
patrickhlauke.github.io/touch/picture-organiser
older/cheaper devices/OS versions
and multitouch?
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
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...
“how can we make it feel
responsive like a native app?”
delayed event dispatch
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 t...
touch-action:none
patrickhlauke.github.io/touch/tests/event-listener_touch-action-none.html
touch-action:none
kills scrolling, long-press,
pinch/zoom
what about

multitouch?
/* 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 backwardscompatibility?
touchstart > [touchmove]+ > touchend >
[300ms delay] > mouseenter > mouseover >
mousemove > mousedown > mouseup > click

+...
www.w3.org/community/touchevents
polyfills for pointer events
(code for tomorrow, today)
handjs.codeplex.com
github.com/Polymer/PointerEvents
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
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 - Introduction to touch (and pointer) events / jQuery Europe 2014 / Vienna 28.02.2014
Getting touchy - Introduction to touch (and pointer) events / jQuery Europe 2014 / Vienna 28.02.2014
Getting touchy - Introduction to touch (and pointer) events / jQuery Europe 2014 / Vienna 28.02.2014
Getting touchy - Introduction to touch (and pointer) events / jQuery Europe 2014 / Vienna 28.02.2014
Nächste SlideShare
Wird geladen in …5
×

Getting touchy - Introduction to touch (and pointer) events / jQuery Europe 2014 / Vienna 28.02.2014

10.009 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie
0 Kommentare
19 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
10.009
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
258
Aktionen
Geteilt
0
Downloads
216
Kommentare
0
Gefällt mir
19
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Getting touchy - Introduction to touch (and pointer) events / jQuery Europe 2014 / Vienna 28.02.2014

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

×