getting touchy
AN INTRODUCTION TO TOUCH AND POINTER EVENTS
Patrick H. Lauke / JavaScript Days / Berlin / 25 September 2013
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
mouseover > mousemove* > mousedown >
(focus) > mouseup > click
*only a single “sacrificial” event is fired
on first tap
mouseover > mousemove > mousedown >
(focus) > mouseup > click
subsequent taps
mousemove > mousedown > (focus)...
emulation works but is
limiting/problematic
(more on that in a minute)
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
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
touchstart > [touchmove]+ > touchend >
mouseover > mousemove > mousedown >
(focus) > mouseup > click
on first tap
touchstart > [touchmove]+ > touchend > mouseover >
mousemove > mousedown > (focus) > mouseup > click
subseque...
Browser/Android 4.2.2
(AppleWebKit/534.30)
mouseover > mousemove > touchstart > touchend > mousedown >
mouseup > click
Bro...
touch 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
“how can we make it feel
responsive like a native app?”
simple feature detection for
touch events
if ('ontouchstart' in window) {
/* some clever stuff here */
}
/* 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
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 > 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 > mouseover > mousemove > mousedown
blur > mouseup > click
iOS + VoiceOver – similar to touch
focus > touchstart > touchend > mouseover > mousemove > mousedown
blur > mouseup > click
Android + TalkBack – keyboard/mouse hybrid
focus > blur > mousedown > mouseup > click > focus(?)
mouse or touch
vs
mouse and touch and
keyboard
/* doubled-up event listeners */
foo.addEventListener('touchstart',
someFunction, false);
foo.addEventListener('click',
so...
/* doubled-up event listeners */
foo.addEventListener('touchstart',
function(e) {
/* prevent delay + mouse events */
e.pre...
github.com/ftlabs/fastclick
preventDefault
kills scrolling, long-press,
pinch/zoom
browsers working to remove
delay when possible
e.g. Chrome on desktop, Chrome/Firefox on Android
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
patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html
1. delayed event dispatch
2. mouse-specific interfaces
3. mousemove doesn't track
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 >
mouseover > mousemove* > mousedown >
(focus) > mouseup > click
*mouse event emulati...
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...
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!
patrickhlauke.github.io/touch/touch-limit
heavy javascript on
requestAnimationFrame
setInterval
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
shinydemos.com/picture-organizer
touch events and IE10
blogs.msdn.com/...
www.w3.org/TR/pointerevents
not just some “not invented here”
new approach for IE10+
html5labs.interoperabilitybridges.com/prototypes/...
https://code.google.com/p/chromium/issues/detail?id=162757
https://bugzilla.mozilla.org/show_bug.cgi?id=822898
...and of course Apple is ignoring it...
patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html
patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html
pointerover > mouseover >
pointerdown > mousedown >
pointermove > mousemove >
(focus) >
pointerup > mouseup >
pointerout >...
pointerenter
pointerleave
gotpointercapture
lostpointercapture
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 (navigator.pointerEnabled) {
/* some clever stuff here
but this covers touch,
stylus, mouse, etc */
}
/* still listen t...
if (navigator.maxTouchPoints > 1) {
/* multitouch-capable device */
}
patrickhlauke.github.io/touch/tests/pointer-multitouch-detect.html
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?”
preventDefault() won't work
(but you can prevent most mouse compatibility events by
cancelling pointerdown)
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
kills scrolling, long-press,
pinch/zoom
touch-action:none
http://patrickhlauke.github.io/touch/tests/event-listener_touch-action-none.html
http://patrickhlauke.github.io/touch/tests/event-listener_touch-action-none.html
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
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...
www.exploretouch.ie/behind-the-scenes
vendor-prefixed in IE10
(and case-sensitive?!)
MSPointerDown
MSPointerMove
MSPointerUp
navigator.msPointerEnabled
navigato...
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
developers.google.com/chrome-developer-tools/docs/console#monitoring_events
Bug 861876 - [...] multiple mousemoves being fired
further reading...
webkrauts.de/artikel/2012/einfuehrung-touch-events
www.html5rocks.com/en/mobile/touchandmouse
blogs.msdn.com/b/davrous/.../handling-touch-in-your-html5-apps...
www.slideshare.net/ysaw/html5-touch-interfaces-sxsw-extended-version
youtube.com/watch?v=AZKpByV5764
danke
@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 / Berlin 25.09.2013
Getting touchy - an introduction to touch and pointer events / Workshop / JavaScript Days / Berlin 25.09.2013
Getting touchy - an introduction to touch and pointer events / Workshop / JavaScript Days / Berlin 25.09.2013
Getting touchy - an introduction to touch and pointer events / Workshop / JavaScript Days / Berlin 25.09.2013
Upcoming SlideShare
Loading in …5
×

Getting touchy - an introduction to touch and pointer events / Workshop / JavaScript Days / Berlin 25.09.2013

3,669 views
3,519 views

Published on

Published in: Technology, Design

Getting touchy - an introduction to touch and pointer events / Workshop / JavaScript Days / Berlin 25.09.2013

  1. 1. getting touchy AN INTRODUCTION TO TOUCH AND POINTER EVENTS Patrick H. Lauke / JavaScript Days / Berlin / 25 September 2013
  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. mouseover > mousemove* > mousedown > (focus) > mouseup > click *only a single “sacrificial” event is fired
  9. 9. on first tap mouseover > mousemove > mousedown > (focus) > mouseup > click subsequent taps mousemove > mousedown > (focus) > 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 (more on that in a minute)
  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. patrickhlauke.github.io/touch/css-dropdown/mouse-only.html
  17. 17. 1. delayed event dispatch 2. mouse-specific interfaces 3. mousemove doesn't track
  18. 18. patrickhlauke.github.io/touch/particle/2
  19. 19. patrickhlauke.github.io/touch/particle/2 (bug in iOS7: moving finger does seem to scroll and fire multiple mousemove events?!)
  20. 20. “we need to go deeper...”
  21. 21. touch events introduced in iOS 2.0, adopted in Chrome/Firefox/Opera www.w3.org/TR/touch-events
  22. 22. touchstart touchmove touchend touchcancel touchenter touchleave
  23. 23. patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html
  24. 24. patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html
  25. 25. touchstart > [touchmove]+ > touchend > mouseover > mousemove > mousedown > (focus) > mouseup > click
  26. 26. on first tap touchstart > [touchmove]+ > touchend > mouseover > mousemove > mousedown > (focus) > mouseup > click subsequent taps touchstart > [touchmove]+ > touchend > mousemove > mousedown > (focus) > mouseup > click tapping away mouseout > (blur) too many touchmove events abort the tap (after touchend) not all browsers consistently send the touchmove some browsers outright weird...
  27. 27. Browser/Android 4.2.2 (AppleWebKit/534.30) mouseover > mousemove > touchstart > touchend > mousedown > mouseup > click Browser/Blackberry PlayBook 2.0 (AppleWebKit/536.2) touchstart > mouseover > mousemove > mousedown > touchend > mouseup > click
  28. 28. touch events vs limitations/problems of mouse event emulation
  29. 29. 1. delayed event dispatch 2. mouse-specific interfaces 3. mousemove doesn't track
  30. 30. 1. delayed event dispatch 2. mouse-specific interfaces 3. mousemove doesn't track
  31. 31. patrickhlauke.github.io/touch/tests/event-listener_show-delay.html
  32. 32. patrickhlauke.github.io/touch/tests/event-listener_show-delay.html
  33. 33. patrickhlauke.github.io/touch/tests/event-listener.html
  34. 34. patrickhlauke.github.io/touch/tests/event-listener.html
  35. 35. “how can we make it feel responsive like a native app?”
  36. 36. simple feature detection for touch events
  37. 37. if ('ontouchstart' in window) { /* some clever stuff here */ }
  38. 38. /* common performance “trick” */ var clickEvent = ('ontouchstart' in window ? 'touchend' : 'click'); blah.addEventListener(clickEvent, function() { ... }, false);
  39. 39. don't make it touch-exclusive
  40. 40. hacks.mozilla.org/2013/04/detecting-touch...
  41. 41. if ('ontouchstart' in window) { /* browser supports touch events but user is not necessarily using touch (exclusively) */ }
  42. 42. hybrid devices touch + mouse + keyboard
  43. 43. patrickhlauke.github.io/touch/tests/event-listener_show-delay-naive-event-fix.html
  44. 44. bugzilla.mozilla.org/show_bug.cgi?id=888304
  45. 45. Android + mouse – behaves like touch touchstart > touchend > mouseover > mousemove > mousedown > mouseup > click
  46. 46. Blackberry PlayBook 2.0 + mouse – like desktop mouse mouseover > mousedown > mousemove > mouseup > click
  47. 47. Android + keyboard – like desktop keyboard focus > click
  48. 48. VoiceOver enables keyboard access on iOS
  49. 49. iOS + keyboard – similar to touch focus > touchstart > touchend > mouseover > mousemove > mousedown blur > mouseup > click
  50. 50. iOS + VoiceOver – similar to touch focus > touchstart > touchend > mouseover > mousemove > mousedown blur > mouseup > click
  51. 51. Android + TalkBack – keyboard/mouse hybrid focus > blur > mousedown > mouseup > click > focus(?)
  52. 52. mouse or touch vs mouse and touch and keyboard
  53. 53. /* doubled-up event listeners */ foo.addEventListener('touchstart', someFunction, false); foo.addEventListener('click', someFunction, false);
  54. 54. /* doubled-up event listeners */ foo.addEventListener('touchstart', function(e) { /* prevent delay + mouse events */ e.preventDefault(); someFunction(); /* or even e.target.click(); */ }, false); foo.addEventListener('click', someFunction, false);
  55. 55. github.com/ftlabs/fastclick
  56. 56. preventDefault kills scrolling, long-press, pinch/zoom
  57. 57. browsers working to remove delay when possible e.g. Chrome on desktop, Chrome/Firefox on Android
  58. 58. patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html
  59. 59. patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html
  60. 60. patrickhlauke.github.io/touch/tests/event-listener_minimum-maximum-scale.html
  61. 61. patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html
  62. 62. patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html
  63. 63. patrickhlauke.github.io/touch/tests/event-listener_minimum-maximum-scale.html
  64. 64. patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html
  65. 65. 1. delayed event dispatch 2. mouse-specific interfaces 3. mousemove doesn't track
  66. 66. patrickhlauke.github.io/touch/css-dropdown/mouse-only.html
  67. 67. no isolated hover (or focus) on touch devices* * iOS fakes it, Samsung Galaxy S4 + stylus, ...
  68. 68. patrickhlauke.github.io/touch/css-dropdown/mouse-only.html
  69. 69. patrickhlauke.github.io/touch/css-dropdown/mouse-only.html
  70. 70. http://developer.apple.com/library/IOS/...
  71. 71. Modernizr issue 869: Detecting a mouse user
  72. 72. www.stucox.com/blog/you-cant-detect-a-touchscreen
  73. 73. avoid hover-based interfaces? complement for keyboard / touch!
  74. 74. patrickhlauke.github.io/touch/css-dropdown/mouse-keyboard.html
  75. 75. patrickhlauke.github.io/touch/css-dropdown/mouse-keyboard.html
  76. 76. patrickhlauke.github.io/touch/css-dropdown/mouse-keyboard-touch.html
  77. 77. 1. delayed event dispatch 2. mouse-specific interfaces 3. mousemove doesn't track
  78. 78. patrickhlauke.github.io/touch/particle/2
  79. 79. patrickhlauke.github.io/touch/particle/2 (bug in iOS7: moving finger does seem to scroll and fire multiple mousemove events?!)
  80. 80. touchstart > [touchmove]+ > touchend > 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 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
  87. 87. 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 );
  88. 88. patrickhlauke.github.io/touch/particle/3
  89. 89. patrickhlauke.github.io/touch/particle/4
  90. 90. www.splintered.co.uk/experiments/archives/paranoid_0.5
  91. 91. tracking finger movement over time ... swipe gestures
  92. 92. patrickhlauke.github.io/touch/swipe
  93. 93. patrickhlauke.github.io/touch/swipe
  94. 94. patrickhlauke.github.io/touch/picture-slider
  95. 95. don't forget mouse/keyboard !
  96. 96. bradfrostweb.com/demo/mobile-first
  97. 97. touchmove fires...a lot!
  98. 98. patrickhlauke.github.io/touch/touch-limit
  99. 99. heavy javascript on requestAnimationFrame setInterval
  100. 100. why stop at a single point? multitouch support
  101. 101. 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
  102. 102. for (i=0; i<e.targetTouches.length; i++) { ... posX = e.targetTouches[i].clientX; posY = e.targetTouches[i].clientY; ... }
  103. 103. patrickhlauke.github.io/touch/tracker/multi-touch-tracker.html
  104. 104. iOS/iPad even preventDefault() can't override 4-finger gestures
  105. 105. iOS7/Safari even preventDefault() can't override back/forward swipe gestures
  106. 106. multitouch gestures
  107. 107. /* 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
  108. 108. patrickhlauke.github.io/touch/iosgestures
  109. 109. patrickhlauke.github.io/touch/iosgestures/image.html
  110. 110. /* with some trigonometry we can replicate these from basic principles. */ var distance = Math.sqrt(Math.pow(...)+Math.pow(...)); var angle = Math.atan2(...);
  111. 111. patrickhlauke.github.io/touch/pinch-zoom-rotate
  112. 112. shinydemos.com/picture-organizer
  113. 113. touch events and IE10
  114. 114. blogs.msdn.com/...
  115. 115. www.w3.org/TR/pointerevents
  116. 116. not just some “not invented here” new approach for IE10+
  117. 117. html5labs.interoperabilitybridges.com/prototypes/...
  118. 118. https://code.google.com/p/chromium/issues/detail?id=162757
  119. 119. https://bugzilla.mozilla.org/show_bug.cgi?id=822898
  120. 120. ...and of course Apple is ignoring it...
  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. pointerover > mouseover > pointerdown > mousedown > pointermove > mousemove > (focus) > pointerup > mouseup > pointerout > mouseout > click mouse events fired “inline” with pointer events (for the primary contact, e.g. first finger on screen)
  124. 124. pointerenter pointerleave gotpointercapture lostpointercapture
  125. 125. 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
  126. 126. /* 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
  127. 127. simple feature detection for pointer events
  128. 128. if (navigator.pointerEnabled) { /* some clever stuff here but this covers touch, stylus, mouse, etc */ } /* still listen to click for keyboard! */
  129. 129. if (navigator.maxTouchPoints > 1) { /* multitouch-capable device */ }
  130. 130. patrickhlauke.github.io/touch/tests/pointer-multitouch-detect.html
  131. 131. pointer events vs limitations/problems of mouse event emulation
  132. 132. 1. delayed event dispatch 2. mouse-specific interfaces 3. mousemove doesn't track
  133. 133. 1. delayed event dispatch 2. mouse-specific interfaces 3. mousemove doesn't track
  134. 134. patrickhlauke.github.io/touch/tests/event-listener_show-delay.html
  135. 135. patrickhlauke.github.io/touch/tests/event-listener_show-delay.html
  136. 136. patrickhlauke.github.io/touch/tests/event-listener.html
  137. 137. patrickhlauke.github.io/touch/tests/event-listener.html
  138. 138. patrickhlauke.github.io/touch/tests/event-listener.html
  139. 139. “how can we make it feel responsive like a native app?”
  140. 140. preventDefault() won't work (but you can prevent most mouse compatibility events by cancelling pointerdown)
  141. 141. 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
  142. 142. touch-action:none kills scrolling, long-press, pinch/zoom
  143. 143. touch-action:none
  144. 144. http://patrickhlauke.github.io/touch/tests/event-listener_touch-action-none.html
  145. 145. http://patrickhlauke.github.io/touch/tests/event-listener_touch-action-none.html
  146. 146. 1. delayed event dispatch 2. mouse-specific interfaces 3. mousemove doesn't track
  147. 147. msdn.microsoft.com/en-us/library/ie/dn265029(v=vs.85).aspx
  148. 148. msdn.microsoft.com/en-us/library/ie/jj152135(v=vs.85).aspx
  149. 149. patrickhlauke.github.io/touch/css-dropdown/mouse-only-aria-haspopup.html
  150. 150. channel9.msdn.com/Blogs/IE/IE11-Using-Hover-Menus-with-Touch
  151. 151. 1. delayed event dispatch 2. mouse-specific interfaces 3. mousemove doesn't track
  152. 152. patrickhlauke.github.io/touch/particle/2
  153. 153. touch-action:none
  154. 154. patrickhlauke.github.io/touch/particle/2a
  155. 155. patrickhlauke.github.io/touch/tracker/mouse-tracker_touch-action-none.html
  156. 156. /* PointerEvents don't have the handy touch arrays, so we have to replicate something similar... */
  157. 157. /* 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; }
  158. 158. patrickhlauke.github.io/touch/tracker/multi-touch-tracker-pointer.html
  159. 159. /* 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? */
  160. 160. www.exploretouch.ie/behind-the-scenes
  161. 161. vendor-prefixed in IE10 (and case-sensitive?!) MSPointerDown MSPointerMove MSPointerUp navigator.msPointerEnabled navigator.msMaxTouchPoints -ms-touch-action unprefixed in IE11
  162. 162. polyfills for pointer events (code for tomorrow, today)
  163. 163. handjs.codeplex.com
  164. 164. www.catuhe.com/msdn/handjs
  165. 165. github.com/Polymer/PointerEvents
  166. 166. www.polymer-project.org
  167. 167. utility libraries (because life is too short to hand-code gesture support etc)
  168. 168. eightmedia.github.io/hammer.js
  169. 169. jQuery Mobile? Sencha Touch? … check for support of IE10+ and “this is a touch device” assumptions
  170. 170. debugging/testing
  171. 171. Issue 181204: Emulate touch events - event order different from real devices
  172. 172. developers.google.com/chrome-developer-tools/docs/console#monitoring_events
  173. 173. Bug 861876 - [...] multiple mousemoves being fired
  174. 174. further reading...
  175. 175. webkrauts.de/artikel/2012/einfuehrung-touch-events
  176. 176. www.html5rocks.com/en/mobile/touchandmouse
  177. 177. blogs.msdn.com/b/davrous/.../handling-touch-in-your-html5-apps...
  178. 178. www.slideshare.net/ysaw/html5-touch-interfaces-sxsw-extended-version
  179. 179. youtube.com/watch?v=AZKpByV5764
  180. 180. danke @patrick_h_lauke github.com/patrickhlauke/touch slideshare.net/redux paciellogroup.com splintered.co.uk

×