1. getting touchy
AN INTRODUCTION TO TOUCH AND POINTER EVENTS
Patrick H. Lauke / JavaScript Days / Berlin / 25 September 2013

2. 1. introduction
2. touch events
3. break
4. pointer events
5. debugging/testing
6. conclusion

3. patrickhlauke.github.io/touch

4. how can I make my website
work on touch devices?

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

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

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

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

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. emulation works but is
limiting/problematic
(more on that in a minute)

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

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

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

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

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

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

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

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

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

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

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

22. touchstart
touchmove
touchend
touchcancel
touchenter
touchleave

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

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

25. touchstart > [touchmove]+ > touchend >
mouseover > mousemove > mousedown >
(focus) > mouseup > click

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. 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. touch events
vs
limitations/problems of
mouse event emulation

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

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

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

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

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

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

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

36. simple feature detection for
touch events

37. if ('ontouchstart' in window) {
/* some clever stuff here */
}

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

39. don't make it touch-exclusive

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

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

42. hybrid devices
touch + mouse + keyboard

43. patrickhlauke.github.io/touch/tests/event-listener_show-delay-naive-event-fix.html

44. bugzilla.mozilla.org/show_bug.cgi?id=888304

46. Android + mouse – behaves like touch
touchstart > touchend > mouseover > mousemove > mousedown > mouseup > click

47. Blackberry PlayBook 2.0 + mouse – like desktop mouse
mouseover > mousedown > mousemove > mouseup > click

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

49. VoiceOver enables keyboard access on iOS

50. iOS + keyboard – similar to touch
focus > touchstart > touchend > mouseover > mousemove > mousedown
blur > mouseup > click

51. iOS + VoiceOver – similar to touch
focus > touchstart > touchend > mouseover > mousemove > mousedown
blur > mouseup > click

52. Android + TalkBack – keyboard/mouse hybrid
focus > blur > mousedown > mouseup > click > focus(?)

53. mouse or touch
vs
mouse and touch and
keyboard

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

55. /* 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);

56. github.com/ftlabs/fastclick

57. preventDefault
kills scrolling, long-press,
pinch/zoom

59. browsers working to remove
delay when possible
e.g. Chrome on desktop, Chrome/Firefox on Android

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

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

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

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

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

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

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

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

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

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

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

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

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

74. Modernizr issue 869: Detecting a mouse user

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

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

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

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

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

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

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

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

83. touchstart > [touchmove]+ > touchend >
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 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

90. 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 );

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

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

93. www.splintered.co.uk/experiments/archives/paranoid_0.5

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

95. patrickhlauke.github.io/touch/swipe

96. patrickhlauke.github.io/touch/swipe

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

98. don't forget mouse/keyboard !

99. bradfrostweb.com/demo/mobile-first

100. touchmove fires...a lot!

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

102. heavy javascript on
requestAnimationFrame
setInterval

103. why stop at a single point?
multitouch support

104. 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

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

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

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

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

109. multitouch gestures

110. /* 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

111. patrickhlauke.github.io/touch/iosgestures

112. patrickhlauke.github.io/touch/iosgestures/image.html

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

114. patrickhlauke.github.io/touch/pinch-zoom-rotate

115. shinydemos.com/picture-organizer

116. touch events and IE10

117. blogs.msdn.com/...

118. www.w3.org/TR/pointerevents

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

120. html5labs.interoperabilitybridges.com/prototypes/...

121. https://code.google.com/p/chromium/issues/detail?id=162757

122. https://bugzilla.mozilla.org/show_bug.cgi?id=822898

123. ...and of course Apple is ignoring it...

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

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

126. 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)

127. pointerenter
pointerleave
gotpointercapture
lostpointercapture

128. 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

129. /* 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

130. simple feature detection for
pointer events

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

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

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

134. pointer events
vs
limitations/problems of
mouse event emulation

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

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

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

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

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

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

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

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

143. preventDefault() won't work
(but you can prevent most mouse compatibility events by
cancelling pointerdown)

144. 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

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

146. touch-action:none

147. http://patrickhlauke.github.io/touch/tests/event-listener_touch-action-none.html

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

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

150. msdn.microsoft.com/en-us/library/ie/dn265029(v=vs.85).aspx

151. msdn.microsoft.com/en-us/library/ie/jj152135(v=vs.85).aspx

152. patrickhlauke.github.io/touch/css-dropdown/mouse-only-aria-haspopup.html

153. channel9.msdn.com/Blogs/IE/IE11-Using-Hover-Menus-with-Touch

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

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

156. touch-action:none

157. patrickhlauke.github.io/touch/particle/2a

158. patrickhlauke.github.io/touch/tracker/mouse-tracker_touch-action-none.html

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

160. /* 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;
}

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

162. /* 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? */

163. www.exploretouch.ie/behind-the-scenes

164. vendor-prefixed in IE10
(and case-sensitive?!)
MSPointerDown
MSPointerMove
MSPointerUp
navigator.msPointerEnabled
navigator.msMaxTouchPoints
-ms-touch-action
unprefixed in IE11

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

166. handjs.codeplex.com

167. www.catuhe.com/msdn/handjs

168. github.com/Polymer/PointerEvents

169. www.polymer-project.org

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

171. eightmedia.github.io/hammer.js

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

173. debugging/testing

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

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

176. Bug 861876 - [...] multiple mousemoves being fired

178. further reading...

179. webkrauts.de/artikel/2012/einfuehrung-touch-events

180. www.html5rocks.com/en/mobile/touchandmouse

181. blogs.msdn.com/b/davrous/.../handling-touch-in-your-html5-apps...

182. www.slideshare.net/ysaw/html5-touch-interfaces-sxsw-extended-version

183. youtube.com/watch?v=AZKpByV5764

184. danke
@patrick_h_lauke
github.com/patrickhlauke/touch
slideshare.net/redux
paciellogroup.com
splintered.co.uk