Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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

4,084 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

×