This document provides an introduction to touch and pointer events. It discusses: 1. The limitations of using mouse events on touch devices, such as delayed event dispatch and mousemove not tracking finger movement. 2. How touch events were introduced to address these limitations but also have problems like too many touchmove events. 3. Pointer events, which unify mouse, touch and pen input into a single model. Pointer events are supported in IE10+ and are a W3C standard, though Apple has not implemented them.

1. gettingtouchy
ANINTRODUCTIONTOTOUCHANDPOINTEREVENTS
Patrick H. Lauke / Version 1.4.14092015 / Smashing Conference Freiburg 2015

2. github.com/patrickhlauke/getting-touchy-presentation
"evergreen" expanded version of this presentation
(and branches for specific conferences)

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. mousemove doesn't track
("evergreen" presentation also covers hover/mouseover)

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

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

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

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

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

23. touchstart
touchmove
touchend
touchcancel

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

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

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

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

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

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

30. Touch/pointer events test results

31. touch events
vs
limitations/problems

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

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

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

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

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
(e.g. 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);
/* if touch events are supported,
only listen to touchend, not click */

46. don't make it touch-exclusive

47. hybrid devices
touch + mouse + keyboard

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

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

53. Issue 392584: Enable TouchEvent API all the time

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

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

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

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

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

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

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

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

64. 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?

65. no way to detect these cases...

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

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

68. touch or mouse or keyboard

69. touch and mouse and
keyboard

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

71. /* 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(); }
...
}

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

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

74. github.com/ftlabs/fastclick

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

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

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

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

79. what about accessibility?

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

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

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

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

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

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

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

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

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

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

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

93. doubling up handling of
mousemove and touchmove

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

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

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

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

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

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

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

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

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

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

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

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

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

107. patrickhlauke.github.io/touch/swipe

108. don't forget mouse/keyboard!

109. bradfrostweb.com/demo/mobile-first

110. touchmove fires...a lot!

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

112. heavy JavaScript on
setInterval or
requestAnimationFrame

113. why stop at a single point?
multitouch support

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

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

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

117. multitouch gestures

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

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

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

121. what about
Internet Explorer?

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

123. in IE10 Microsoft introduced
Pointer Events

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

125. not just some
“not invented here”
technology

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

127. Pointer Events - W3C REC 24 February 2015

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

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

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

131. ...what about Apple?

132. Bug 105463 - Implement pointer events RESOLVED WONTFIX

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

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

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

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

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

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

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

140. simple feature detection for
pointer events

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

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

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

144. are pointer events better?

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

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

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

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

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

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

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

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

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

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

155. a more declarative approach
with touch-action

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

176. better: just listen to
pointermove...

177. no need for separate mouse or
touch event listeners

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

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

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

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

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

183. but you can distinguish
mouse or touch or stylus

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

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

186. what about multitouch?

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

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

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

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

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

192. extended capabilities
(if supported by hardware)

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

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

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

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

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

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

199. pointer events as the future?

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

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

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

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

204. Google working instead to
expand Touch Events

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

206. W3C Touch Events Extensions WG Note

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

208. Google Developers: Using rotationAngle and touchRadius

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

210. W3C Touch Events Community Group

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

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

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

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

215. touch events in IE/Edge

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

217. "frankensteining"
pointer and touch events

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

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

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

221. Windows Mobile Insider Preview

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

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

224. touch events only turned on
for mobile

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

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

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

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

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

230. HandJS

231. Polymer

232. GitHub - Polymer/PointerEvents

233. GitHub - Polymer/PointerEvents deprecated

234. jQuery blog - Improving the Pointer Events Polyfill

235. GitHub - jQuery Pointer Events Polyfill (PEP)

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

237. Alex Schmitz' PEP demo

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

239. Hammer.js

240. Hammer.js

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

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

243. further reading...

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

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

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

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

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

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

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

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

252. youtube.com/watch?v=AZKpByV5764

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