1. getting touchy
AN INTRODUCTION TO TOUCH (AND POINTER) EVENTS
Patrick H. Lauke / jQuery Europe / Vienna / 28 February 2014

2. patrickhlauke.github.io/touch

3. “how can I make my website
work on touch devices?”

4. you don't need touch events
browsers emulate regular mouse events

5. patrickhlauke.github.io/touch/tests/event-listener_mouse-only.html

6. (mouseenter) > mouseover > mousemove* >
mousedown > (focus) > mouseup > click
*only a single “sacrificial” event is fired

7. on first tap
(mouseenter) > mouseover > mousemove >
mousedown > (focus) > mouseup > click
subsequent taps
mousemove > mousedown > mouseup > click
tapping away
mouseout > (blur)
focus/blur only on focusable elements in Opera Mobile and Firefox
mouseout not on iOS Safari and embedded WebView (e.g. iOS Chrome)

8. emulation works,
but is limiting/problematic

9. 1. delayed event dispatch
2. mouse-specific interfaces
3. mousemove doesn't track

10. 1. delayed event dispatch
2. mouse-specific interfaces
3. mousemove doesn't track

11. patrickhlauke.github.io/touch/tests/event-listener_show-delay.html

12. patrickhlauke.github.io/touch/tests/event-listener_show-delay.html

13. 1. delayed event dispatch
2. mouse-specific interfaces
3. mousemove doesn't track

14. vimeo.com/ondemand

15. 1. delayed event dispatch
2. mouse-specific interfaces
3. mousemove doesn't track

16. patrickhlauke.github.io/touch/particle/2

17. patrickhlauke.github.io/touch/particle/2
(bug in iOS7: moving finger does seem to scroll and fire multiple mousemove events?!)

18. “we need to go deeper...”

19. touch events
introduced in iOS 2.0, adopted in Chrome/Firefox/Opera
www.w3.org/TR/touch-events

20. touchstart
touchmove
touchend
touchcancel
touchenter
touchleave

21. patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html

22. patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html
Bug 128534 - 'mouseenter' mouse compat event not fired when listeners for touch events

23. touchstart > [touchmove]+ > touchend >
(mouseenter) > mouseover >
mousemove > mousedown > (focus) >
mouseup > click
(mouse events only fired for single-finger tap)

24. on first tap
touchstart > [touchmove]+ > touchend >
(mouseenter) > mouseover > mousemove > mousedown >
(focus) > mouseup > click
subsequent taps
touchstart > [touchmove]+ > touchend >
mousemove > mousedown > mouseup > click
tapping away
mouseout > (mouseleave) > (blur)
too many touchmove events abort the tap (after touchend)
too many touchmove events on activatable elements lead to touchcancel
not all browsers consistently send the touchmove
some browsers outright weird...

25. Browser/Android 4.3
(AppleWebKit/534.30)
mouseover > mousemove > touchstart > touchend > mousedown >
mouseup > click
Browser/Blackberry PlayBook 2.0
(AppleWebKit/536.2)
touchstart > mouseover > mousemove > mousedown > touchend >
mouseup > click

26. touch events
vs
limitations/problems

27. 1. delayed event dispatch
2. mouse-specific interfaces
3. mousemove doesn't track

28. 1. delayed event dispatch
2. mouse-specific interfaces
3. mousemove doesn't track

29. patrickhlauke.github.io/touch/tests/event-listener_show-delay.html

30. patrickhlauke.github.io/touch/tests/event-listener_show-delay.html

31. why the delay?
double-tap to zoom
(mostly anyway)

32. what if browsers didn't wait?

33. Puffin/Android (popular in Korea?) puffinbrowser.com
double-tap zooms and fires mouse events + click
(also, doesn't support touch events at all)

34. when does the delay happen?

35. patrickhlauke.github.io/touch/tests/event-listener.html

36. patrickhlauke.github.io/touch/tests/event-listener.html

37. “how can we make it feel
responsive like a native app?”

38. react to events fired before
the 300ms delay...

39. touchstart
for an “immediate” control
touchend
for a control that fires after finger lifted

40. interlude:
simple feature detection for
touch events

41. if ('ontouchstart' in window) {
/* some clever stuff here */
}
/* older browsers have flaky support
so more hacky tests needed...
use Modernizr.touch or similar */

42. /* common performance “trick” */
var clickEvent = ('ontouchstart' in window ?
'touchend' : 'click');
blah.addEventListener(clickEvent,
function() { ... }, false);

43. don't make it touch-exclusive

44. hacks.mozilla.org/2013/04/detecting-touch...

45. if ('ontouchstart' in window) {
/* browser supports touch events
but user is not necessarily
using touch (exclusively) */
}

46. hybrid devices
touch + mouse + keyboard

49. Android + mouse – behaves like touch
touchstart > touchend > mouseover > mousemove > mousedown >
(focus) > mouseup > click

50. Android + keyboard – like desktop keyboard
focus > click

51. VoiceOver enables keyboard access on iOS

52. iOS + keyboard – similar to touch
focus > touchstart > touchend >
(mouseenter) > mouseover > mousemove > mousedown
blur > mouseup > click

53. iOS + VoiceOver – similar to touch
focus > touchstart > touchend >
(mouseenter) > mouseover > mousemove > mousedown
blur > mouseup > click

54. Android + TalkBack – keyboard/mouse hybrid
focus > blur > mousedown > mouseup > click > focus(?)
(though seems a bit flakey...)

55. touch or mouse or keyboard

56. touch and mouse and keyboard

57. /* doubled-up event listeners */
foo.addEventListener('touchend',
someFunction, false);
foo.addEventListener('click',
someFunction, false);

58. foo.addEventListener('touchstart',
function(e) {
/* prevent delay + mouse events */
e.preventDefault();
}, false);
/* doubled-up event listeners */
foo.addEventListener('touchend',
someFunction, false);
foo.addEventListener('click',
someFunction, false);

59. preventDefault
can kill scrolling, pinch/zoom, etc on
touchstart/touchmove

60. github.com/ftlabs/fastclick

61. browsers working to remove
delay when possible

62. patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html

63. patrickhlauke.github.io/touch/tests/event-listener_minimum-maximum-scale.html

65. patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html

66. patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html

67. patrickhlauke.github.io/touch/tests/event-listener_minimum-maximum-scale.html

68. Bug 922896 - Optimizations to remove 300ms touch > mouse events delay
[RESOLVED - FIXED]

69. Chrome 32 for Android removes delay also when
<meta name="viewport" content="width=device-width">
updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away

70. patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html

71. iOS/Safari designed themselves into a corner
with “double-tap to scroll”
bugs.webkit.org/show_bug.cgi?id=122212

72. 1. delayed event dispatch
2. mouse-specific interfaces
3. mousemove doesn't track

73. vimeo.com/ondemand

74. no isolated hover (or focus)
on touch devices*
* iOS fakes it, Samsung Galaxy S4 + stylus, ...

75. patrickhlauke.github.io/touch/css-dropdown/mouse-only.html

76. http://developer.apple.com/library/IOS/...

77. Modernizr issue 869: Detecting a mouse user

78. www.stucox.com/blog/you-cant-detect-a-touchscreen

79. avoid hover-based interfaces?
complement for keyboard / touch!

80. patrickhlauke.github.io/touch/css-dropdown/mouse-keyboard-touch.html

81. 1. delayed event dispatch
2. mouse-specific interfaces
3. mousemove doesn't track

82. patrickhlauke.github.io/touch/particle/2

83. touchstart > [touchmove]+ > touchend >
(mouseenter) > mouseover >
mousemove* > mousedown > (focus) >
mouseup > click
*mouse event emulation fires only a single mousemove

84. doubling up handling of
mousemove and touchmove

85. var posX, posY;
...
function positionHandler(e) {
posX = e.clientX;
posY = e.clientY;
}
...
canvas.addEventListener('mousemove',
positionHandler, false);

86. var posX, posY;
...
function positionHandler(e) {
/* handle both mouse and touch? */
}
...
canvas.addEventListener('mousemove',
positionHandler, false);
canvas.addEventListener('touchmove',
positionHandler, false);

87. interface MouseEvent : UIEvent {
readonly attribute long
screenX;
readonly attribute long
screenY;
readonly attribute long
clientX;
readonly attribute long
clientY;
readonly attribute boolean
ctrlKey;
readonly attribute boolean
shiftKey;
readonly attribute boolean
altKey;
readonly attribute boolean
metaKey;
readonly attribute unsigned short
button;
readonly attribute EventTarget
relatedTarget;
void
initMouseEvent(...);
};
www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MouseEvent

88. interface TouchEvent : UIEvent {
readonly attribute TouchList touches;
readonly attribute TouchList targetTouches;
readonly attribute TouchList changedTouches;
readonly attribute boolean
altKey;
readonly attribute boolean
metaKey;
readonly attribute boolean
ctrlKey;
readonly attribute boolean
shiftKey;
};
www.w3.org/TR/touch-events/#touchevent-interface

89. interface Touch {
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
};
long
EventTarget
long
long
long
long
long
long
identifier;
target;
screenX;
screenY;
clientX;
clientY;
pageX;
pageY;
www.w3.org/TR/touch-events/#touch-interface

90. patrickhlauke.github.io/touch/touchlist-objects

91. var posX, posY;
...
function positionHandler(e) {
if ((e.clientX)&&(e.clientY)) {
posX = e.clientX;
posY = e.clientY;
} else if (e.targetTouches) {
posX = e.targetTouches[0].clientX;
posY = e.targetTouches[0].clientY;
e.preventDefault();
}
}
...
canvas.addEventListener('mousemove',
positionHandler, false );
canvas.addEventListener('touchmove',
positionHandler, false );

92. patrickhlauke.github.io/touch/particle/3

93. tracking finger movement
over time ... swipe gestures

94. patrickhlauke.github.io/touch/swipe

95. patrickhlauke.github.io/touch/swipe

96. patrickhlauke.github.io/touch/picture-slider

97. don't forget mouse/keyboard !

98. touchmove fires...a lot!

99. do absolute minimum on each
touchmove
(usually: store new coordinates)

100. heavy JavaScript on
requestAnimationFrame
setInterval

101. patrickhlauke.github.io/touch/touch-limit

102. why stop at a single point?
multitouch support

103. interface TouchEvent : UIEvent {
readonly attribute TouchList touches;
readonly attribute TouchList targetTouches;
readonly attribute TouchList changedTouches;
readonly attribute boolean
altKey;
readonly attribute boolean
metaKey;
readonly attribute boolean
ctrlKey;
readonly attribute boolean
shiftKey;
};
www.w3.org/TR/touch-events/#touchevent-interface

104. for (i=0; i<e.targetTouches.length; i++) {
...
posX = e.targetTouches[i].clientX;
posY = e.targetTouches[i].clientY;
...
}

105. patrickhlauke.github.io/touch/tracker/multi-touch-tracker.html

106. iOS/iPad even preventDefault()
can't override 4-finger gestures

107. iOS7/Safari even preventDefault()
can't override back/forward swipe gestures

108. multitouch gestures

109. /* iOS/Safari has gesture events for size/rotation,
not supported in Chrome/Firefox/Opera,
not part of the W3C Touch Events spec. */
gesturestart, gesturechange, gestureend
e.scale, e.rotation

110. /* with some trigonometry we can replicate these
from basic principles. */
var distance = Math.sqrt(Math.pow(...)+Math.pow(...));
var angle = Math.atan2(...);

111. patrickhlauke.github.io/touch/picture-organiser

112. older/cheaper devices/OS versions
and multitouch?

113. LG Optimus 2X – Android 2.3.7

114. ZTE Open – FirefoxOS 1.1

115. touch events and
Internet Explorer...

116. blogs.msdn.com/...

117. www.w3.org/TR/pointerevents

118. not just some “not invented here”
new approach for IE10+

119. html5labs.interoperabilitybridges.com/prototypes/...

120. code.google.com/p/chromium/issues/detail?id=162757

121. bugzilla.mozilla.org/show_bug.cgi?id=822898

123. ...what about Apple?

124. bugs.webkit.org/show_bug.cgi?id=105463
RESOLVED WONTFIX?!

125. patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html

126. patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html

127. mousemove* >
pointerover > mouseover >
pointerenter > mouseenter >
pointerdown > mousedown >
pointermove > mousemove >
gotpointercapture >
focus >
pointerup > mouseup >
lostpointercapture >
pointerout > mouseout >
pointerleave > mouseleave >
click
mouse events fired “inline” with pointer events
(for a primary pointer, e.g. first finger on screen)

128. vendor-prefixed in IE10
MSPointerDown etc
navigator.msMaxTouchPoints
-ms-touch-action
unprefixed in IE11

129. simple feature detection for
pointer events

130. if (window.PointerEvent) {
/* some clever stuff here
but this covers touch,
stylus, mouse, etc */
}
/* still listen to click for keyboard! */

131. if (navigator.maxTouchPoints > 1) {
/* multitouch-capable device */
}

132. patrickhlauke.github.io/touch/tests/pointer-multitouch-detect.html

133. no need for separate
mouse or touch
event listeners

134. /* touch events: separate handling */
foo.addEventListener('touchmove', ... , false);
foo.addEventListener('mousemove', ... , false);
/* pointer events: single listener
for mouse, stylus, touch */
foo.addEventListener('pointermove', ... , false);

135. no need for separate
mouse or touch
code to get x / y coords

136. interface MouseEvent : UIEvent {
readonly attribute long
screenX;
readonly attribute long
screenY;
readonly attribute long
clientX;
readonly attribute long
clientY;
readonly attribute boolean
ctrlKey;
readonly attribute boolean
shiftKey;
readonly attribute boolean
altKey;
readonly attribute boolean
metaKey;
readonly attribute unsigned short
button;
readonly attribute EventTarget
relatedTarget;
void
initMouseEvent(...);
};
www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MouseEvent

137. /* Pointer Events extend Mouse Events
vs Touch Events and their completely new objects/arrays */
interface PointerEvent :
readonly
attribute
readonly
attribute
readonly
attribute
readonly
attribute
readonly
attribute
readonly
attribute
readonly
attribute
readonly
attribute
};
MouseEvent {
long
pointerId;
long
width;
long
height;
float
pressure;
long
tiltX;
long
tiltY;
DOMString pointerType;
boolean
isPrimary;
www.w3.org/TR/pointerevents/#pointerevent-interface

138. but you can distinguish
mouse or touch or stylus
if needed

139. foo.addEventListener('pointermove', function(e) {
...
switch(e.pointerType) {
case 'mouse':
...
break;
case 'pen':
...
break;
case 'touch':
...
break;
default:
/* future-proof */
...
} , false);

140. “how can we make it feel
responsive like a native app?”

141. delayed event dispatch

142. patrickhlauke.github.io/touch/tests/event-listener.html

143. you can preventDefault()
most mouse compatibility events on pointerdown
...but click is not considered mouse compatibility event,
and the 300ms delay is not affected by this.

144. patrickhlauke.github.io/touch/tests/event-listener.html

145. patrickhlauke.github.io/touch/tests/event-listener.html

146. touch-action: auto|none|[pan-x][pan-y]
www.w3.org/TR/pointerevents/#the-touch-action-css-property
only prevents default touch action (e.g. double-tap to zoom)
does not stop synthetic mouse events nor click

147. touch-action:none

148. patrickhlauke.github.io/touch/tests/event-listener_touch-action-none.html

149. touch-action:none
kills scrolling, long-press,
pinch/zoom

150. what about
multitouch?

151. /* PointerEvents don't have the handy touch arrays,
so we have to replicate something similar... */

152. /* PointerEvents don't have the handy touch arrays,
so we have to replicate something similar... */
var points = [];
switch (e.type) {
case 'pointerdown':
/* add to the array */
break;
case 'pointermove':
/* update the relevant array entry's x and y */
break;
case 'pointerup':
/* remove the relevant array entry */
break;
}

153. patrickhlauke.github.io/touch/tracker/multi-touch-tracker-pointer.html

154. /* like iOS/Safari, IE10/Win has higher-level gestures,
but these are not part of the W3C Pointer Events spec.
Replicate these from basic principles again? */

155. pointer events as the future?

156. what about backwardscompatibility?

157. touchstart > [touchmove]+ > touchend >
[300ms delay] > mouseenter > mouseover >
mousemove > mousedown > mouseup > click
+
mousemove > pointerover > mouseover >
pointerdown > mousedown > pointermove >
mousemove > pointerup > mouseup > pointerout >
mouseout > [300ms delay] > click

158. www.w3.org/community/touchevents

159. polyfills for pointer events
(code for tomorrow, today)

160. handjs.codeplex.com

161. github.com/Polymer/PointerEvents

162. utility libraries
(because life is too short to hand-code gesture support etc)

163. eightmedia.github.io/hammer.js

164. jQuery Mobile? Sencha Touch? …
check for support of IE10+ and “this is a touch device” assumptions

165. debugging/testing

166. Issue 181204: Emulate touch events - event order different from real devices

167. Bug 920956 - DevTools touch emulation: suppress regular mouse events ...

168. developers.google.com/chrome-developer-tools/docs/console#monitoring_events

169. developers.google.com/chrome-developer-tools/docs/remote-debugging

170. further reading...

171. Matt Gaunt – Touch Feedback for Mobile Sites
www.gauntface.co.uk/blog/2013/06/25/touch-feedback-for-mobile-sites
Jonathan Stark – FastActive
github.com/jonathanstark/FastActive
Stephen Woods – HTML5 Touch Interfaces
www.slideshare.net/ysaw/html5-touch-interfaces-sxsw-extended-version
David Rousset – Unifying touch and mouse: how Pointer Events will make cross-browsers touch support easy
blogs.msdn.com/b/davrous/archive/2013/02/20/handling-touch[...]
Chris Wilson + Paul Kinlan – Touch And Mouse: Together Again For The First Time
www.html5rocks.com/en/mobile/touchandmouse
Patrick H. Lauke – Webseiten zum Anfassen
webkrauts.de/artikel/2012/einfuehrung-touch-events
Ryan Fioravanti – Creating Fast Buttons for Mobile Web Applications
developers.google.com/mobile/articles/fast_buttons
Boris Smus – Multi-touch Web Development
www.html5rocks.com/en/mobile/touch
Boris Smus – Generalized input on the cross-device web
smus.com/mouse-touch-pointer

172. Rick Byers + Boris Smus (Google I/O) – Point, Click, Tap, Touch - Building Multi-Device Web Interfaces
developers.google.com/events/io/sessions/361772634
Grant Goodale – Touch Events
www.w3.org/conf/2011/#Touch_Events
W3C – Touch Events Extensions
www.w3.org/TR/2013/NOTE-touch-events-extensions-20131031
Mozilla Developer Network – Touch Events
developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/Touch_events
WebPlatform.org – Pointer Events
docs.webplatform.org/wiki/concepts/Pointer_Events
Rick Byers – The best way to avoid the dreaded 300ms click delay is to disable double-tap zoom
plus.google.com/+RickByers/posts/ej7nsuoaaDa
Tim Kadlec – Avoiding the 300ms Click Delay, Accessibly
timkadlec.com/2013/11/Avoiding-the-300ms-click-delay-accessibly
Microsoft – Pointer events updates (differences between IE10 and IE11)
msdn.microsoft.com/en-us/library/ie/dn304886(v=vs.85).aspx

173. Patrick H. Lauke – Webseiten zum Anfassen
webkrauts.de/artikel/2012/einfuehrung-touch-events
Patrick H. Lauke – Drei unter einem Dach: Pointer-Events für Maus, Stylus und Touchscreen
webkrauts.de/artikel/2013/drei-unter-einem-dach
Tilo Mitra – The State of Gestures
speakerdeck.com/tilomitra/the-state-of-gestures
Microsoft – Hover touch support (IE10/IE11)
msdn.microsoft.com/en-us/library/ie/dn265029(v=vs.85).aspx
Stu Cox – The Golden Pattern for Handling Touch Input
www.stucox.com/blog/the-golden-pattern-for-handling-touch-input/
Peter-Paul Koch – Touch table
www.quirksmode.org/mobile/tableTouch.html
Peter-Paul Koch – Preventing the touch default
www.quirksmode.org/mobile/default.html
Peter-Paul Koch – Mouse event bubbling in iOS
www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html

174. youtube.com/watch?v=AZKpByV5764

175. get in touch
@patrick_h_lauke
github.com/patrickhlauke/touch
slideshare.net/redux
paciellogroup.com
splintered.co.uk