This document discusses strategies for making websites work well on touchscreen devices. It begins by explaining how browsers emulate mouse events on touchscreens but that this has limitations. Native touch events are introduced as a better solution. The document then covers challenges like the 300ms delay between touch and click, issues with hover interfaces on touch, and difficulties tracking finger movement. It provides examples and recommendations for handling these problems, such as using touchstart instead of click, avoiding hover menus, and handling both touchmove and mousemove events. Throughout, it provides links to code samples demonstrating these strategies in action.

1. gettingtouchy
ANINTRODUCTIONTOTOUCHANDPOINTEREVENTS
Patrick H. Lauke / Version 1.4.09092015

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

3. patrickhlauke.github.io/touch

6. Touch/pointer events test results

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

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

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

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

11. compatibility mouse events
(mouseenter) > mouseover > mousemove* > mousedown >
(focus) > mouseup > click
* only a single “sacrificial” mousemove event fired

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

13. emulation works,
but is limiting/problematic

14. 1. delayed event dispatch
2. hover/mouseover interfaces
3. mousemove doesn't track

15. 1. delayed event dispatch
2. hover/mouseover interfaces
3. mousemove doesn't track

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

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

18. 1. delayed event dispatch
2. hover/mouseover interfaces
3. mousemove doesn't track

19. Steam's "hover to reveal screenshot" feature

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

21. 1. delayed event dispatch
2. hover/mouseover interfaces
3. mousemove doesn't track

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

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

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

25. touch events
introduced by Apple, adopted
in Chrome/Firefox/Opera
www.w3.org/TR/touch-events

26. touchstart
touchmove
touchend
touchcancel
touchenter
touchleave

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

28. patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html
Bug 128534 - 'mouseenter' mouse compat event not fired...

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

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

31. • 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...

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

33. Touch/pointer events test results

34. touch events
vs
limitations/problems

35. 1. delayed event dispatch
2. hover/mouseover interfaces
3. mousemove doesn't track

36. 1. delayed event dispatch
2. hover/mouseover interfaces
3. mousemove doesn't track

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

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

39. what if browsers didn't wait?

40. you can try it out in Chrome/Android
chrome://flags/#disable-click-delay

41. when does the delay happen?

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

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

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

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

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

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

48. touchend for a control that
fires after finger lifted

49. interlude: simple feature
detection for touch events

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

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

52. don't make it touch-exclusive

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

54. hybrid devices
touch + mouse + keyboard

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

59. Bug 888304 - touch-events on Firefox-desktop should be disabled until we can support them
properly

60. Issue 392584: Enable TouchEvent API all the time

61. even on "mobile" we can have
multiple inputs...

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

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

66. Windows 10 Mobile/Microsoft Edge + mouse - like desktop
mouseover > mousedown > mousemove > mouseup > click

67. Android + keyboard – like desktop keyboard (TAB / ENTER)
focus > click

68. iOS keyboard only works in
same situations as on-screen
keyboard
(e.g. text inputs, URL entry)

69. VoiceOver enables full keyboard access on iOS

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

71. mobile Assistive Technologies
(e.g. screen readers on touchscreen devices)

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

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

74. further scenarios?
• desktop with external touchscreen
• desktop with external touchpad
• touchscreen laptop with non-touch second screen
• touchscreen laptop with trackpad/mouse
• ...and other permutations?

75. no way to detect these cases...

76. Modernizr.touch detects touch events not touch devices

77. Stu Cox: You can't detect a touchscreen

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

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

80. touch or mouse or keyboard

81. touch and mouse and
keyboard

82. /* doubled-up event listeners */
foo.addEventListener(' touchend ', someFunction, false);
foo.addEventListener(' click ', someFunction, false);
/* but this would fire our function twice for touch? */

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

84. /* doubled-up event listeners */
foo.addEventListener('touchend', someFunction, false);
foo.addEventListener('click', someFunction, false);
/* prevent mouse events + click as part of the common handler */
function someFunction(e) {
...
if (e.type == 'touchend') { e.preventDefault(); }
...
}

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

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

87. github.com/ftlabs/fastclick

88. patrickhlauke.github.io/touch/fastclick
YouTube: iOS/Safari 300ms click delay: vanilla Bootstrap and using fastclick.js

89. patrickhlauke.github.io/touch/fastclick/fastclick.html
YouTube: iOS/Safari 300ms click delay: vanilla Bootstrap and using fastclick.js

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

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

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

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

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

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

96. what about accessibility?

98. "Force enable zoom" reintroduces delay
patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html

99. ...though 'Browser' doesn't do any of the optimisations...

100. Firefox/Android and Firefox OS currently lack this setting
Bug 852247 - [a11y] Force over-ride zoom
[RESOLVED FIXED]

102. "mobile optimised" viewport
and
"double-tap to zoom"

103. Chrome 32+ / Android: content="width=device-width"
suppresses double-tap-to-zoom, still allows pinch zoom
Google Developers: 300ms tap delay, gone away

104. Bug 941995 - Remove 300ms [...] on "responsive" pages
[RESOLVED FIXED]

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

106. iOS/Safari designed themselves into a corner: “double-tap to scroll”
Bug 122212 - Optimizations to remove 300ms touch > mouse events delay

107. patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay

108. YouTube: iOS8/Safari 300ms delay heuristics?
(quick tap - with 300ms delay - vs slow tap) (bug, not feature?)

109. 1. delayed event dispatch
2. hover/mouseover interfaces
3. mousemove doesn't track

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

111. no concept of hover
on touch devices
iOS fakes it, Samsung Galaxy Note II/Pro + stylus, ...

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

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

114. iOS "fakes" hover support: stops event sequence on content change
iOS Developer Library - Safari Web Content Guide - Handling Events

115. YouTube: Samsung Galaxy Note Pro 12.2 stylus hover
...but you can't rely on this, as most devices don't have it...

116. Modernizr: Detecting a mouse user

117. what about CSS / Media
Queries?

118. W3C Media Queries Level 4 (Editor's Draft)

119. /* MQ4 Interaction Media Features*/
pointer: none | coarse | fine
hover: none | on-demand | hover
any-pointer: none | coarse | fine
any-hover: none | coarse | fine
/* Example (naive) use of hover */
@media (hover:none), (hover:on-demand) {
/* suppress :hover-based menus */
}

120. dev.opera - Interaction Media Features and their potential (for incorrect assumptions)
because of the concept of "primary" pointer, not useful in multi-input scenarios

121. avoid hover/mouseover
interfaces?

122. complement for
keyboard/touch!

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

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

125. 1. delayed event dispatch
2. hover/mouseover interfaces
3. mousemove doesn't track

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

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

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

129. doubling up handling of
mousemove and touchmove

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

131. var posX, posY;
...
function positionHandler(e) {
posX = e.clientX ;
posY = e.clientY ;
}
...
canvas.addEventListener(' mousemove ', positionHandler, false);
canvas.addEventListener(' touchmove ', positionHandler, false);
/* but this won't work for touch... */

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

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

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

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

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

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

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

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

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

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

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

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

144. patrickhlauke.github.io/touch/swipe

145. patrickhlauke.github.io/touch/swipe

146. don't forget mouse/keyboard!

147. bradfrostweb.com/demo/mobile-first

148. touchmove fires...a lot!

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

150. heavy JavaScript on
setInterval or
requestAnimationFrame

151. debounce/throttle events

152. function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout); timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
var myEfficientFn = debounce(function() { ... }, 250);
window.addEventListener('touchmove', myEfficientFn);
David Walsh: JavaScript Debounce Function

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

154. why stop at a single point?
multitouch support

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

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

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

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

159. iOS7+ Safari/WebView preventDefault() can't override
back/forward swipe gestures on edge of screen

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

161. multitouch gestures

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

163. patrickhlauke.github.io/touch/iosgestures

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

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

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

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

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

169. HTC Hero – Android 2.1

170. LG Optimus 2X – Android 2.3.7

171. ZTE Open – Firefox OS 1.1

172. Touch Events specification
grey areas...

173. do touch events fire during
scroll/zoom?

174. not defined in spec, but de facto
yes in most modern browsers
patrickhlauke.github.io/touch/gesture-touch

175. different models and behaviours, particularly in old browsers
YouTube: Touch Events and scrolling/zooming (playlist)

176. e.g. older versions of Chrome fire touchcancel on scroll/zoom
YouTube: Google Developers - Mobile Web Thursdays: Performance on Mobile

177. Google Developers: A More Compatible, Smoother Touch
(lots more complexity / edge cases, particularly for old browsers/devices)

178. non-standard iOS quirks...

179. making generic elements
clickable...

180. iOS Developer Library - Safari Web Content Guide - Handling Events - Making Elements
Clickable

181. patrickhlauke.github.io/touch/ios-clickable/

182. contrary to Apple's docs, onclick="" seems unnecessary
(at least since iOS6, maybe earlier)
patrickhlauke.github.io/touch/ios-clickable/

183. mouse + click event bubbling
on touch
(important when using event delegation)

184. Quirksmode: Mouse event bubbling in iOS

185. patrickhlauke.github.io/touch/bubbling/button.html

186. patrickhlauke.github.io/touch/bubbling/link.html

187. patrickhlauke.github.io/touch/bubbling/div.html

188. patrickhlauke.github.io/touch/bubbling/div-onclick-target.html

189. patrickhlauke.github.io/touch/bubbling/div-onclick-ancestor.html

190. patrickhlauke.github.io/touch/bubbling/div-addeventlistener-target.html

191. patrickhlauke.github.io/touch/bubbling/div-addeventlistener-ancestor.html

192. patrickhlauke.github.io/touch/bubbling/div-cursorpointer-target.html

193. patrickhlauke.github.io/touch/bubbling/div-cursorpointer-ancestor.html

194. mouse + click bubbling in iOS
• target element is a link or form control
• target or any ancestor (up to but not including body ) has explicit
mouse or click handler (even if only empty function)
• target or any ancestor (up to and including document ) has
cursor:pointer
Quirksmode: Mouse event bubbling in iOS

195. what about
Internet Explorer?

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

197. in IE10 Microsoft introduced
Pointer Events

198. unifies mouse, touch and pen input into a single event model

199. ...and some new inputs (though currently mapped to mouse)
Building Xbox One Apps using HTML and JavaScript

200. not just some
“not invented here”
technology

201. submitted by Microsoft as W3C Candidate REC 09 May 2013

202. Pointer Events - W3C REC 24 February 2015

203. html5labs.interoperabilitybridges.com/prototypes/...

204. Issue 162757: Implement pointer events in Chrome behind experimental flag
(however, more on this later...)

205. Bug 822898 - Implement pointer events

206. hacks.mozilla.org - Pointer Events now in Firefox Nightly
(at the moment, only for mouse and quite basic)

207. Firefox Nightly now first browser with Pointer Events on OS X

208. ...what about Apple?

209. Bug 105463 - Implement pointer events RESOLVED WONTFIX

210. Maciej Stachowiak - [webkit-dev] pointer events specification - first editors draft

211. @patrick_h_lauke paraphrasing Apple's stance on Pointer Events...

212. the anatomy of Pointer Events
(sequence, event object, ...)

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

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

215. events fired on tap (IE10/IE11)
mousemove* >
pointerover > mouseover >
pointerenter > mouseenter >
pointerdown > mousedown >
gotpointercapture >
focus >
pointermove > mousemove >
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)

216. current IE10/11 quirk
...
pointerup > mouseup >
lostpointercapture >
pointerout > mouseout >
pointerleave > mouseleave >
click
the fact that click comes last is a current IE10/11 quirk – according
to spec it should come after pointerup > mouseup , and does already
when using touch-action
W3C Pointer Events WG mailing list - Jacob Rossi (Microsoft)

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

218. events fired on tap (Edge)
mousemove* >
pointerover > mouseover >
pointerenter > mouseenter >
pointerdown > mousedown >
focus
gotpointercapture >
pointermove > mousemove >
pointerup > mouseup >
lostpointercapture >
click >
pointerout > mouseout >
pointerleave > mouseleave
note click fired correctly after pointerup in Microsoft Edge

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

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

221. simple feature detection for
pointer events

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

223. "don't forget about keyboard users" note in Pointer Events spec

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

225. are pointer events better?

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

227. 1. delayed event dispatch
2. hover/mouseover interfaces
3. mousemove doesn't track

228. 1. delayed event dispatch
2. hover/mouseover interfaces
3. mousemove doesn't track

229. patrickhlauke.github.io/touch/tests/event-listener.html
(IE11/WinPhone 8.1 Update no optimization for width=device-width )

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

231. patrickhlauke.github.io/touch/tests/event-listener.html
(Microsoft Edge/Win10 has double-tap to zoom, so problem on desktop too)

232. pointer / mouse events and delay
...
[300ms delay]
click
...
300ms delay just before click event

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

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

235. • double-up pointerup and click listeners?
• prevent code firing twice with preventDefault ?
won't work: preventDefault() stops mouse compatibility events, but
click is not considered mouse compatibility event

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

237. a more declarative approach
with touch-action

238. CSS property
what action should the browser handle?
touch-action: auto | none | [ pan-x || pan-y ] | manipulation
www.w3.org/TR/pointerevents/#the-touch-action-css-property
only determines default touch action, does not stop compatibility
mouse events nor click

239. touch-action:none
(suppress all default browser behaviour)

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

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

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

243. touch-action:manipulation
(suppress double-tap-to-zoom)

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

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

246. Bug 979345 - Implement touch-action:manipulation [...]
[RESOLVED FIXED]

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

248. Bug 133114 - Implement " touch-action:manipulation " [...]
Apple at least considering this, for once...

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

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

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

253. "Allow zooming on all web content" reintroduces delay
patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html

254. "Allow zooming on all web content" reintroduces delay
patrickhlauke.github.io/touch/tests/event-listener_minimum-maximum-scale.html

255. width=device-width still has delay in IE11/WinPhone 8.1 Update
patrickhlauke.github.io/touch/tests/event-listener_width-device-width.html

256. Microsoft Edge removes delay for width=device-width
patrickhlauke.github.io/touch/tests/event-listener_width-device-width.html

257. 1. delayed event dispatch
2. hover/mouseover interfaces
3. mousemove doesn't track

258. MSDN: Hover touch support

259. MSDN: Using aria-haspopup to simulate hover on touch-enabled devices
dirty/inappropriate hack, but interesting experiment nonetheless

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

261. Channel9 MSDN - IE11: Using Hover Menus with Touch
tap-and-hold to trigger hover menus...

262. 1. delayed event dispatch
2. hover/mouseover interfaces
3. mousemove doesn't track

263. patrickhlauke.github.io/touch/particle/2
mousemove / pointermove fire, but browser scroll action takes over

264. you can "fake" it with
touch-action:none
and listen for mouse events...

265. patrickhlauke.github.io/touch/particle/2a
does not work in Microsoft Edge/Windows 10 Mobile
(due to touch events support)

266. no need for separate mouse or
touch event listeners

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

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

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

270. 3D Rotator by Creative Punch
coded to only use mouse events

271. 3D Rotator modified to use Pointer Events
minimal code changes, as Pointer Events extend mouse events

272. but you can distinguish
mouse or touch or stylus

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

274. /* in IE11/Edge, pointerType returns a string
in IE10, the return type is long */
MSPOINTER_TYPE_TOUCH: 0x00000002
MSPOINTER_TYPE_PEN: 0x00000003
MSPOINTER_TYPE_MOUSE: 0x00000004
MSDN: IE Dev Center - API reference - pointerType property

275. what about multitouch?

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

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

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

279. simultaneous use of inputs is
hardware-dependent
(e.g. Surface 3 "palm blocking" prevents concurrent
touch/stylus/mouse, but not
touch/external mouse/external stylus)

280. YouTube: Pointer Events support multiple stylus/pen inputs simultaneously

281. /* 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... */
MSDN IE10 Developer Guide: Gesture object and events

282. extended capabilities
(if supported by hardware)

283. /* Pointer Events - pressure*/
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;
}
pressure : value in range [0,1]. if no hardware support,
0.5 in active button state, 0 otherwise

284. patrickhlauke.github.io/touch/tracker/...
YouTube: Touch tracker with Surface 3 pen

285. hovering stylus
• hardware-dependant
• pointermove fires
• pressure == 0 (non-active button state)
• track pointerdown / pointerup to be safe

286. /* Pointer Events - tilt */
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;
}
tiltX / tiltY : value in degrees [-90, 90].
returns 0 if hardware does not support tilt

287. patrickhlauke.github.io/touch/pen-tracker
YouTube: ...pen with tilt, pressure and hover support

288. pointermove fires if tiltX,
tiltY or pressure change
(even if x/y position doesn't...)

289. pointer capture
(implicit vs explicit)

290. • touch events have implicit capture: once you start a touch movement
on an element, events keep firing to the element even when moving
outside the element's boundaries
• pointer events behave like mouse events: only fire events to an
element while pointer (e.g. finger on touchscreen) inside element, but
you can explicitly capture pointers

291. /* events related to pointer capture */
gotpointercapture / lostpointercapture
/* example of how to capture a pointer explicitly */
element.addEventListener('pointerdown', function(e) {
this. setPointerCapture(e.pointerId) ;
}, false }
/* capture automatically released on pointerup or explicitly
with releasePointerCapture() */
patrickhlauke.github.io/touch/tests/pointercapture.html

292. pointer events as the future?

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

294. YouTube: Google Developers - HTTP 203: Pointer Events

295. 1. performance issues (hit-testing)
2. unified event model not "mobile first"
3. difficult to implement "pull to refresh"
4. we already have touch events

296. 1. performance issues (hit-testing)
2. unified event model not "mobile first"
3. difficult to implement "pull to refresh"
4. we already have touch events
5. Apple won't implement them...

297. Google working instead to
expand Touch Events

298. Issue 404128: Meta: Extend TouchEvent API to have the power of PointerEvents...

299. W3C Touch Events Extensions WG Note

300. /* extension to touch objects */
partial interface Touch {
readonly attribute float radiusX;
readonly attribute float radiusY;
readonly attribute float rotationAngle;
readonly attribute float force;
};

301. Google Developers: Using rotationAngle and touchRadius

302. Rick Byers - Paint (with rotationAngle and touchRadius)

303. Google Developers: Precision Touch for Precise Gestures

304. Bug 133180 - Consider exposing fractional Touch co-ordinates

305. interface Touch {
readonly attribute long identifier;
readonly attribute EventTarget target;
readonly attribute long float screenX;
readonly attribute long float screenY;
readonly attribute long float clientX;
readonly attribute long float clientY;
readonly attribute long float pageX;
readonly attribute long float pageY;
};

306. W3C Touch Events Community Group

307. W3C Web Events WG - Touch Events errata
(early effort to clarify grey areas, simplify language used)

308. W3C Touch Events - Level 2 (Editor's Draft)
(merges errata, touch events extensions, fractional touch coordinates)

309. following developer outcry,
Google reconsidered support
for Pointer Events...

310. Chrome Canary (currently 47.0.2504.0) has rough experimental
support for Pointer Events (for desktop w/touch only)
chrome.exe --enable-blink-features=PointerEvent

311. work now continues to enhance/expand Pointer Events...
W3C Pointer Events - Level 2 (Editor's Draft)

312. touch events in IE/Edge

313. MSDN IEBlog: The Mobile Web should just work for everyone
Windows Phone 8.1 Update now supports Pointer Events and Touch Events

314. MSDN IEBlog: Making the web “just work” with any input: Mouse, Touch, and Pointer Events

315. "frankensteining"
pointer and touch events

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

317. Windows Dev Center: Get the Windows Phone Developer Preview

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

319. events fired on tap (IE11)
mousemove* > pointerover > mouseover >
pointerenter > mouseenter > pointerdown >
touchstart >
mousedown > gotpointercapture > focus >
pointermove > touchmove > mousemove >
pointerup >
touchend >
mouseup > lostpointercapture > pointerout > mouseout >
pointerleave > mouseleave >
click
IE11/Windows Phone 8.1u1
with "frankensteined" Pointer/Touch Events support
(but not on desktop)

320. YouTube: IE11 / Windows Phone 8.1u1 Preview for Developers - implicit and explicit capture

321. YouTube:Touch Events and scrolling/zooming - IE11/Windows Phone 8.1u1 Dev Preview

322. Windows Mobile Insider Preview

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

324. events fired on tap (Microsoft Edge)
pointerover > pointerenter > pointerdown >
touchstart >
gotpointercapture
pointermove > touchmove > pointerup >
touchend >
mouseover > mouseenter > mousemove > mousedown >
focus >
mouseup > click >
lostpointercapture >
pointerleave
Microsoft Edge/Windows 10 Mobile closer to touch events
(note grouped mouse compatibility events)

325. correctly fires touch events on scroll/zoom
patrickhlauke.github.io/touch/gesture-touch/

326. touch events only turned on
for mobile

327. W3C Touch Events WG mailing list
Jacob Rossi - Enabling Touch Events everywhere

328. about:flags in Microsoft Edge to turn on touch events on desktop
(e.g. touch-enabled laptops)

329. transitional event handling
(until all browsers support pointer events)

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

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

332. HandJS

333. patrickhlauke.github.io/touch/handjs/listener/event-listener.html

334. patrickhlauke.github.io/touch/handjs/listener/event-listener.html

335. events fired on tap with HandJS
touchstart >
pointerover > pointerenter > pointerdown >
[touchmove > pointermove ]+ >
touchend >
pointerup > pointerout > pointerleave >
[300ms delay]
pointerenter >
mouseenter > mousemove* > mousedown > mouseup >
click
(not correct order, but close enough?)

336. www.catuhe.com/msdn/handjs/

337. patrickhlauke.github.io/touch/handjs/tracker/tracker-just-pointer-handjs.html
for all pointers isPrimary==true , touch-action ignored/broken (e.g. scrolling),
can't handle touch and mouse simultaneously on touchscreen laptop

338. Polymer

339. GitHub - Polymer/PointerEvents

340. GitHub - Polymer/PointerEvents deprecated

341. jQuery blog - Improving the Pointer Events Polyfill

342. GitHub - jQuery Pointer Events Polyfill (PEP)

343. /* adding jQuery PEP */
<script src="https://code.jquery.com/pep/0.3.0/pep.js"></script>
/* need to use custom touch-action attribute, not CSS (yet) */
<button touch-action="none" >...</div>

344. GitHub - IE-Touch polyfill
opposite approach: polyfill touch events into IE

345. patrickhlauke.github.io/touch/ie-touch/listener/event-listener.html

346. events fired on tap with ie-touch
mousemove >
pointerover > mouseover >
pointerenter > mouseenter >
pointerdown > touchstart > mousedown >
gotpointercapture >
focus >
pointermove > touchmove mousemove >
pointerup > touchend > mouseup >
lostpointercapture >
pointerout > mouseout >
pointerleave > mouseleave >
[300ms delay]
click

347. /* some ie-touch peculiarities to be mindful of:
- event object has no targetTouches TouchList
- touches acts as if it were targetTouches
no touch points that didn't start on the element
we're listening to are reported
- changedTouches always contains all touch points
already in touches */

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

349. Hammer.js

350. Hammer.js

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

352. patrickhlauke.github.io/touch/swipe

353. patrickhlauke.github.io/touch/hammer/swipe

354. debugging/testing

355. nothing beats having real devices...

356. Chrome DevTools / Remote Debugging on Android
Chrome DevTools / Using the Console / Monitoring events

357. enable touch events even without a touchscreen
(to test "naive" 'ontouchstart' in window code)
chrome://flags/#touch-events

358. beware inaccurate emulation

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

360. Chrome DevTools / Device Mode & Mobile Emulation

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

362. bonus material

363. Leap Motion Controller

364. YouTube: Leap Motion Controller tracker
patrickhlauke.github.io/touch/leapmotion/tracker

365. W3C Gamepad API
HTML5 Rocks: Gamepad API tester

366. IndieUI: Events 1.0 - Events for User Interface Independence

367. Input Device Capabilities (Unofficial Draft)

368. further reading...

369. • Matt Gaunt – Touch Feedback for Mobile Sites
• Jonathan Stark – FastActive
• Stephen Woods – HTML5 Touch Interfaces
• YouTube: Stephen Woods – Responsive 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

370. • 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

371. • Tim Kadlec – Avoiding the 300ms Click Delay, Accessibly
• David Rousset - Unifying touch and mouse [...]
• 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
• YouTube: Tilo Mitra (YUI) – The State of Gestures

372. • Microsoft – Hover touch support (IE10/IE11)
• W3C Media Queries Level 4 – pointer
• 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
• YouTube: Edge Conference (Feb 2013 London) – Panel: Input
• Edge Conference (Mar 2014 London) – Panel: Pointers and
Interactions
• Trent Walton – Device-Agnostic

373. • Stu Cox – The Golden Pattern for Handling Touch Input
• Matt Gaunt – ‘Focusing’ on the Web Today
• Mobiscroll – Working with touch events
• Peter-Paul Koch – The iOS event cascade and innerHTML
• Patrick H. Lauke – Make your site work on touch devices
• Scott Jehl (Filament Group) – Tappy: A custom tap event handler
• Yehuda Katz – Touch events on the web are fundamentally
unfinished ...

374. • Andrea Giammarchi – PointerEvents No More
• Google Developers – Web Fundamentals: Stateful Elements Respond
to Touch
• YouTube: Matt Gaunt (Google) - Touch in a Web App? No Problem
• Luke Wroblewski – How to Communicate Hidden Gestures
• David Washington - Designing custom touch interactions
• David Washington - Building pull-to-refresh
• Andy Peatling - JavaScript Pull to Refresh for the Web

375. • Rob Larsen - The Uncertain Web: Pointer Event Polyfill and Chrome
Fragmentation
• Detlev Fisher - Implications of new input modes (touch, speech,
gestures) for the Web Content Accessibility Guidelines
• Ralph Thomas - Towards declarative touch interactions
• Windows Dev Center: Windows desktop applications > Guidelines >
Interaction (touch, keyboard, mouse, pen)
• Microsoft Open Technologies - jQuery Adopts Pointer Events

376. • jQuery blog - Getting on Point
• IEBlog - Pointer Events W3C Recommendation, Interoperable Touch,
and Removing the Dreaded 300ms Tap Delay
• Microsoft Open Technologies - Pointer Events is now a W3C Standard
• Patrick H. Lauke (The Paciello Group) - Pointer Events advance to W3C
Recommendation
• Jacob Rossi - The Input Shouldn't Matter

377. youtube.com/watch?v=AZKpByV5764

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