1. getting touchy
AN INTRODUCTION TO TOUCH AND POINTER EVENTS
Patrick H. Lauke / Version 1.2.10102014

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

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
(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

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

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

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

66. VoiceOver enables full keyboard access on iOS

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

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

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

70. Modernizr.touch detects touch events not touch devices

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

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

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

74. touch or mouse or keyboard

75. touch and mouse and
keyboard

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

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

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

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

80. github.com/ftlabs/fastclick

81. patrickhlauke.github.io/touch/fastclick

82. patrickhlauke.github.io/touch/fastclick/fastclick.html

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

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

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

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

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

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

89. what about accessibility?

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

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

93. Bug 852247 - [a11y] Force over-ride zoom

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

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

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

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

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

99. YouTube: iOS8/Safari 300ms delay heuristics
(quick tap - with 300ms delay - vs slow tap)

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

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

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

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

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

105. iOS Developer Library - Safari Web Content Guide - Handling Events

106. YouTube: Samsung Galaxy Note Pro 12.2 stylus hover

107. Modernizr: Detecting a mouse user

108. avoid hover/mouseover
interfaces?

109. complement for
keyboard/touch!

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

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

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

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

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

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

116. doubling up handling of
mousemove and touchmove

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

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

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

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

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

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

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

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

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

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

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

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

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

130. patrickhlauke.github.io/touch/swipe

131. patrickhlauke.github.io/touch/swipe

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

133. don't forget mouse/keyboard!

134. bradfrostweb.com/demo/mobile-first

135. touchmove fires...a lot!

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

137. heavy JavaScript on
setInterval or
requestAnimationFrame

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

139. why stop at a single point?
multitouch support

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

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

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

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

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

145. multitouch gestures

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

147. patrickhlauke.github.io/touch/iosgestures

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

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

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

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

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

153. HTC Hero – Android 2.1

154. LG Optimus 2X – Android 2.3.7

155. ZTE Open – Firefox OS 1.1

156. what about
Internet Explorer?

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

158. in IE10 Microsoft introduced
Pointer Events

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

160. Building Xbox One Apps using HTML and JavaScript

161. not just some
“not invented here”
technology

162. Pointer Events - W3C Candidate Recommendation 09 May 2013

163. Pointer Events - W3C Editor's Draft

164. html5labs.interoperabilitybridges.com/prototypes/...

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

166. Bug 822898 - Implement pointer events

167. ...what about Apple?

168. Bug 105463 - Implement pointer events RESOLVED WONTFIX
Maciej Stachowiak - [webkit-dev] pointer events specification - first editors draft

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

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

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

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

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

174. simple feature detection for
pointer events

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

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

178. are pointer events better?

179. no need for separate mouse or
touch event listeners

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

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

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

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

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

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

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

187. /* in IE11, the pointerType property 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

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

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

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

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

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

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

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

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

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

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

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

199. touch-action

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

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

202. touch-action:manipulation

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

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

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

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

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

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

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

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

212. ... content="width=device-width"
patrickhlauke.github.io/touch/tests/event-listener_width-device-width.html

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

214. MSDN: Hover touch support

215. MSDN: Using aria-haspopup to simulate hover on touch-enabled devices

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

217. Channel9 MSDN - IE11: Using Hover Menus with Touch

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

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

220. touch-action:none

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

222. what about multitouch?

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

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

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

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

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

228. what about backwards-compatibility?

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

230. W3C Touch Events Community Group

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

232. pointer events as the future?

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

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

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

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

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

238. W3C Web Events WG - Touch Events errata

239. W3C Touch Events Extensions WG Note

240. HTML5 Rocks: Precision Touch for Precise Gestures

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

242. 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;
};

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

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

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

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

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

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

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

250. HandJS

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

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

253. www.catuhe.com/msdn/handjs/

254. Polymer

255. GitHub - Polymer/PointerEvents

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

257. GitHub - Polymer/PointerEvents deprecated

258. GitHub - IE-Touch polyfill

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

260. Hammer.js

261. Hammer.js

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

263. patrickhlauke.github.io/touch/swipe

264. patrickhlauke.github.io/touch/hammer/swipe
(but currently broken in IE?)

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

266. debugging/testing

267. Chrome DevTools / Using the Console / Monitoring events

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

269. beware inaccurate emulation

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

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

272. beware inaccurate
implementation

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

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

276. bonus material

277. Leap Motion Controller

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

279. W3C Gamepad API
HTML5 Rocks: Gamepad API tester

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

281. further reading...

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

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

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

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

286. • Mobiscroll – Working with touch events
• Vivian Cromwell – A More Compatible, Smoother Touch
• 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 ...
• Andrea Giammarchi – PointerEvents No More
• Google Developers – Web Fundamentals: Stateful Elements Respond
to Touch

287. youtube.com/watch?v=AZKpByV5764

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