This document discusses touch and pointer events for making websites work on touchscreen devices. It begins by explaining how browsers emulate mouse events on touchscreens but that this has limitations like delayed event dispatch and mousemove not tracking touches accurately. It then covers the touch events introduced by Apple and adopted by other browsers. Finally, it discusses pointer events as a unified approach for touch, mouse, and other pointing devices, and their current browser support.

1. gettingtouchy
AN INTRODUCTION TO TOUCH AND POINTER EVENTS
Patrick H. Lauke / DevConFu / Jūrmala, Latvia / 29 May 2014

2. patrickhlauke.github.io/touch

3. Touch/pointer events test results

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. compatibility mouse events
(mouseenter) > mouseover > mousemove* > mousedown >
(focus) > mouseup > click
* only a single “sacrificial” mousemove event fired

9. 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 Firefox
mouseout not on iOS Safari/WebView (e.g. iOS Chrome)
Opera Mobile and

10. emulation works,
but is limiting/problematic

11. 1. delayed event dispatch
2. mousemove doesn't track

12. 1. delayed event dispatch
2. 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. mousemove doesn't track

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

17. patrickhlauke.github.io/touch/particle/2
(iOS7 bug: moving finger fires mousemove on scroll)

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

19. touch events
introduced by Apple, 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...

23. events fired on tap
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)

25. • too many touchmove events prevent mouse compatibility events
after touchend (not considered a "clean" tap)
• too many touchmove events on activatable elements can lead to
touchcancel (in old Chrome/Browser versions)
• not all browsers consistently send the touchmove
some browsers outright weird...

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

27. Touch/pointer events test results

28. touch events
vs
limitations/problems

29. 1. delayed event dispatch
2. mousemove doesn't track

30. 1. delayed event dispatch
2. mousemove doesn't track

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

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

33. what if browsers didn't wait?

34. Puffin/Android double-tap zooms and fires mouse events + click
(also, doesn't support touch events)

35. Try it out in Chrome? chrome://flags/

36. when does the delay happen?

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

38. touch / mouse events delay
touchstart > [touchmove]+ > touchend >
[300ms delay]
(mouseenter) > mouseover > mousemove > mousedown >
(focus) > mouseup > click

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

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

41. touchstart for an “immediate”
control
(fire/jump button on a game)

42. touchend for a control that
fires after finger lifted

43. interlude: simple feature
detection for touch events

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

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

46. don't make it touch-exclusive

47. /* common performance “trick” */
var clickEvent =
( 'ontouchstart' in window ? 'touchend' : 'click');
...
/* if touch events are supported,
only listen to touchend, not click */

48. hybrid devices
touch + mouse + keyboard

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

55. Blackberry PlayBook 2.0 + mouse - like desktop
mouse mouseover > mousedown > mousemove > mouseup > click

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

57. iOS + VoiceOver (with/without keyboard) – similar to touch
focus > touchstart > touchend > (mouseenter) > mouseover >
mousemove > mousedown > blur > mouseup > click

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

59. hacks.mozilla.org - Detecting touch [...]

60. /* feature detection for touch events */
if ('ontouchstart' in window) {
/* browser supports touch events but user is
not necessarily using touch (exclusively) */
/* it could be a mobile, tablet, desktop, fridge ... */
}

61. touch or mouse or keyboard

62. touch and mouse and keyboard

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

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

65. preventDefault() kills
scrolling, pinch/zoom, etc

66. apply preventDefault()
carefully
(just on buttons/links, not entire page)

67. github.com/ftlabs/fastclick

68. browsers working to remove
double-tap to zoom delay
(when page not zoomable)

69. <meta name="viewport" content="user-scalable=no">
patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html

70. <meta name="viewport" content="user-scalable=no">
patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html

71. ... content="minimum-scale=1, maximum-scale=1"
patrickhlauke.github.io/touch/tests/event-listener_minimum-maximum-scale.html

72. ... content="minimum-scale=1, maximum-scale=1"
patrickhlauke.github.io/touch/tests/event-listener_minimum-maximum-scale.html

73. Bug 922896 - Optimizations to remove 300ms [...] delay
[RESOLVED - FIXED]

74. what about accessibility?

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

77. Chrome 32+ / Android: ... content="width=device-width"
updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away

78. Bug 941995 - Remove 300ms [...] on "responsive" pages

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

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

81. 1. delayed event dispatch
2. mousemove doesn't track

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

83. patrickhlauke.github.io/touch/particle/2
(iOS7 bug: moving finger fires mousemove on scroll)

84. events fired on tap
touchstart > [touchmove]+ > touchend >
(mouseenter) > mouseover >
mousemove* > mousedown > (focus) >
mouseup > click
* mouse event emulation fires only a single mousemove
too many touchmove events prevent mouse compatibility events after touchend

85. doubling up handling of
mousemove and touchmove

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

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

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

89. partial interface MouseEvent {
readonly attribute double screenX;
readonly attribute double screenY;
readonly attribute double pageX ;
readonly attribute double pageY ;
readonly attribute double clientX;
readonly attribute double clientY;
readonly attribute double x ;
readonly attribute double y ;
readonly attribute double offsetX ;
readonly attribute double offsetY ;
};
www.w3.org/TR/cssom-view/#extensions-to-the-mouseevent-interface

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

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

92. touches
all touch points on screen
targetTouches
all touch points that started on the element
changedTouches
touch points that caused the event to fire

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

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

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

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

97. patrickhlauke.github.io/touch/swipe

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

99. don't forget mouse/keyboard!

100. bradfrostweb.com/demo/mobile-first

101. touchmove fires...a lot!

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

103. heavy JavaScript on
setInterval or
requestAnimationFrame

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

105. why stop at a single point?
multitouch support

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

107. /* iterate over touch array */
for (i=0; i< e.targetTouches .length; i++) {
...
posX = e.targetTouches[i].clientX ;
posY = e.targetTouches[i].clientY ;
...
}

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

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

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

111. multitouch gestures

112. /* iOS/Safari/WebView has gesture events for size/rotation,
not part of the W3C Touch Events spec. */
gesturestart / gesturechange / gestureend
function(e) {
/* e.scale
e.rotation */
}
/* not supported in Chrome/Firefox/Opera */

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/picture-organiser

115. not all old/cheap devices/OSs
support multitouch!

116. HTC Hero – Android 2.1

117. LG Optimus 2X – Android 2.3.7

118. ZTE Open – Firefox OS 1.1

119. what about
Internet Explorer?

120. up to IE9 (Win7 / WinPhone7.5)
only mouse events

121. in IE10 Microsoft introduced
Pointer Events

122. David Rousset - Unifying touch and mouse [...]

123. not just some
“not invented here”
technology

124. Pointer Events - W3C Candidate Recommendation 09 May 2013

125. Pointer Events - W3C Editor's Draft 14 May 2014

126. html5labs.interoperabilitybridges.com/prototypes/...

127. Issue 162757: Implement pointer events in Chrome behind experimental flag

128. Bug 822898 - Implement pointer events

129. ...what about Apple?

130. Bug 105463 - Implement pointer events RESOLVED WONTFIX

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

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

133. events fired on tap
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)

134. vendor-prefixed in IE10
MSPointerDown etc
navigator.msMaxTouchPoints
-ms-touch-action
unprefixed in IE11 (but prefixed versions still mapped for compatibility)

135. /* 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;
}
/* plus all the classic MouseEvent attributes
like clientX , clientY , etc */

136. simple feature detection for
pointer events

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

139. /* detect maximum number of touch points */
if ( navigator.maxTouchPoints > 0 ) {
/* device with a touchscreen */
}
if ( navigator.maxTouchPoints > 1 ) {
/* multitouch-capable device */
}

140. are pointer events better?

141. no need for separate mouse or
touch event listeners

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

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

144. /* Pointer Events extend Mouse Events */
foo.addEventListener(' pointermove ', function(e) {
...
posX = e.clientX ;
posY = e.clientY ;
...
}, false);
www.w3.org/TR/pointerevents/#pointerevent-interface

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

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

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

148. 1. delayed event dispatch
2. mousemove doesn't track

149. 1. delayed event dispatch
2. mousemove doesn't track

150. patrickhlauke.github.io/touch/tests/event-listener_show-delay.html
(IE/Win8 has double-tap to zoom, so problem on desktop too)

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

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

153. pointer / mouse events and delay
mousemove >
pointerover > mouseover >
pointerenter > mouseenter >
pointerdown > mousedown >
pointermove > mousemove >
gotpointercapture >
focus >
pointerup > mouseup >
lostpointercapture >
pointerout > mouseout >
pointerleave > mouseleave >
[300ms delay]
click

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

155. we could try a similar
approach to touch events...

156. • double-up listeners - pointerup and click
• prevent code firing twice - preventDefault
preventDefault() on pointerdown stops mouse compatibility
events, but click is not considered mouse compatibility event

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

158. touch-action

159. CSS property
touch-action: auto | none | [ pan-x || pan-y ] | manipulation
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

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

161. touch-action:manipulation

162. patrickhlauke.github.io/touch/tests/event-listener_touch[...]

163. Bug 979345 - Implement touch-action:manipulation [...]

164. Issue 349016: Add support for touch-action:manipulation
chrome://flags/#enable-experimental-web-platform-features (Chrome 35)

165. Bug 133114 - Implement " touch-action:manipulation " [...]

166. 1. delayed event dispatch
2. mousemove doesn't track

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

168. touch-action:none

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

170. what about multitouch?

171. /* PointerEvents don't have the handy TouchList objects,
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;
}

172. patrickhlauke.github.io/touch/tracker/multi-touch-tracker-
pointer.html
(note multiple isPrimary pointers)

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

174. /* advanced topic: pointer capture */
gotpointercapture / lostpointercapture
element.setPointerCapture(pointerId)
patrickhlauke.github.io/touch/tests/pointercapture.html

175. what about backwards-
compatibility?

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

177. W3C Touch Events Community Group

178. /* cover all cases (hat-tip Stu Cox) */
if ('onpointerdown' in window) {
/* bind to Pointer Events: pointerdown, pointerup, etc */
} else {
/* bind to mouse events: mousedown, mouseup, etc */
if ('ontouchstart' in window) {
/* bind to Touch Events: touchstart, touchend, etc */
}
}
/* bind to keyboard / click */

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

180. HandJS

181. www.catuhe.com/msdn/handjs/

182. Polymer

183. GitHub - Polymer/PointerEvents

184. /* Polymer's PointerEvents are not fired unless
an element has a (custom) touch-action attribute */
<div id="foo" touch-action="none" ></div>

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

186. Hammer.js

187. /* Hammer's high-level events example */
var element = document.getElementById('test_el');
var hammertime = Hammer(element).on("swipeleft swiperight",
function(event) {
/* handle horizontal swipes */
});

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

189. debugging/testing

190. Chrome DevTools / Using the Console / Monitoring events

191. chrome://flags/#touch-events

192. beware inaccurate emulation

193. Issue 181204: [...] event order different from real devices
Fixed in Chrome (Canary) 37

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

195. beware inaccurate
implementation

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

198. Bug 861876 - [...] preventDefault on touchstart doesn't stop synthetic mouse events

200. further reading...

201. • Matt Gaunt – Touch Feedback for Mobile Sites
• Jonathan Stark – FastActive
• Stephen Woods – HTML5 Touch Interfaces
• Chris Wilson + Paul Kinlan – Touch And Mouse: Together Again For
The First Time
• Ryan Fioravanti – Creating Fast Buttons for Mobile Web Applications
• Boris Smus – Multi-touch Web Development
• Boris Smus – Generalized input on the cross-device web
• Boris Smus – Interactive touch laptop experiments

202. • Rick Byers + Boris Smus (Google I/O) – Point, Click, Tap, Touch -
Building Multi-Device Web Interfaces
• Grant Goodale – Touch Events
• W3C – Touch Events Extensions
• Mozilla Developer Network – Touch Events
• WebPlatform.org – Pointer Events
• Rick Byers – The best way to avoid the dreaded 300ms click delay is
to disable double-tap zoom
• Chromium Issue 152149: All touch-event related APIs should exist if
touch support is enabled at runtime

203. • Tim Kadlec – Avoiding the 300ms Click Delay, Accessibly
• Microsoft – Pointer events updates (differences between IE10-IE11)
• Patrick H. Lauke – Webseiten zum Anfassen
• Patrick H. Lauke – Drei unter einem Dach: Pointer-Events für Maus,
Stylus und Touchscreen
• Patrick H. Lauke – Make your site work on touch devices
• Stu Cox – You can't detect a touchscreen
• Tilo Mitra – The State of Gestures
• Microsoft – Hover touch support (IE10/IE11)
• W3C Media Queries Level 4 – pointer

204. • Stu Cox – The Good & Bad of Level 4 Media Queries
• Peter-Paul Koch – Touch table
• Peter-Paul Koch – Preventing the touch default
• Peter-Paul Koch – Mouse event bubbling in iOS
• Edge Conference (Feb 2013 London) – Panel: Input
• Edge Conference (Mar 2014 London) – Panel: Pointers and Interactions
• Trent Walton – Device-Agnostic
• Stu Cox – The Golden Pattern for Handling Touch Input
• Matt Gaunt – ‘Focusing’ on the Web Today
• Mobiscroll – Working with touch events

205. youtube.com/watch?v=AZKpByV5764

206. get in touch
@patrick_h_lauke
github.com/patrickhlauke/touch
patrickhlauke.github.io/getting-touchy-presentation
slideshare.net/redux
paciellogroup.com
splintered.co.uk