This document provides an introduction to touch and pointer events. It discusses how touch events work on mobile and tablet devices compared to mouse events on desktop. It notes some limitations of relying only on mouse events for touch devices, such as delayed event dispatching and lack of mouse movement tracking. The document then introduces touch events and how they map to mouse events. It provides examples of how to handle both touch and mouse events together to support different input methods. It also discusses some newer pointer events and media queries for detecting input capabilities. Overall, the document aims to help developers make their websites work well across both touch and non-touch environments.

1. gettingtouchy
ANINTRODUCTIONTOTOUCHANDPOINTEREVENTS
Patrick H. Lauke / Frontend NE / 2 March 2017

2. about me...
• senior accessibility consultant at The Paciello Group
• previously developer relations at Opera
• co-editor Touch Events Level 2
• WG chair and co-editor Pointer Events Level 2

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

4. patrickhlauke.github.io/touch

6. Touch/pointer events test results

7. my JavaScript sucks...
(but will hopefully convey the right concepts)

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

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

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

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

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

13. 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; subtle differences between browsers
Mobile/tablet touchscreen activation/tap event order

14. emulation works,
but is limiting/problematic

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

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

17. patrickhlauke.github.io/touch/tests/event-listener_show-delay.html
less of a problem in modern browsers, but for iOS < 9.3 or older Androids still relevant

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

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

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

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

22. we need to go deeper...

23. touch events
introduced by Apple, adopted
in Chrome/Firefox/Opera
(and belatedly IE/Edge – more on that later)
www.w3.org/TR/touch-events

24. caniuse.com: Can I use touch events?

25. touchstart
touchmove
touchend
touchcancel

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

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

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

29. • 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 touchmove
• differences in focus / blur and some mouse compatibility events
(e.g. mouseenter / mouseleave )
• some events may only fire when tapping away to another focusable
element (e.g. blur )
some browsers outright weird...

30. Browser/Android 4.3
mouseover > mousemove > touchstart > touchend >
mousedown > mouseup > click
Browser/Blackberry PlayBook 2.0
touchstart > mouseover > mousemove > mousedown >
touchend > mouseup > click
UC Browser 10.8/Android 6
mouseover > mousemove > touchstart > (touchmove)+ > touchend >
mousedown > focus > mouseup > click

31. Touch/pointer events test results

32. shouldn't affect your code,
unless you're expecting a very
specific sequence...

33. <interlude >
simple feature detection for
touch events

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

35. patrickhlauke.github.io/touch/tests/touch-feature-detect.html

36. /* conditional "touch OR mouse/keyboard" event binding */
if ('ontouchstart' in window) {
// set up event listeners for touch
...
} else {
// set up event listeners for mouse/keyboard
...
}

37. don't make it touch-exclusive

38. hybrid devices
touch + mouse + keyboard

41. @patrick_h_lauke showing a naive "touch or mouse" issue on Flickr
(which has since been fixed)

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

43. Issue 392584: TouchEvent API should be enabled consistently

44. Chrome now returns window.TouchEvent on non-touch devices
patrickhlauke.github.io/touch/tests/touch-feature-detect.html

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

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

49. Blackberry PlayBook 2.0 + mouse – like desktop
mouseover > mousedown > (mousemove)+ > mouseup > click

50. Blackberry Leap (BBOS 10.1) + mouse – like desktop
mouseover > mousedown > (mousemove)+ > mouseup > click

51. Windows 10 Mobile/Microsoft Edge + mouse – like desktop
mouse events (+ pointer events) + click

52. Windows 10 Mobile/Microsoft Edge + keyboard – like desktop
focus > click

53. Android + keyboard – like desktop
focus > click

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

55. VoiceOver enables full keyboard access on iOS

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

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

58. no way to detect these cases...

59. Modernizr.touch detects touch events not touch devices

60. Stu Cox: “ou can't detect a touchscreen

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

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

63. touch or mouse or keyboard

64. touch and mouse and keyboard

65. what about
CSS4 Media Queries?

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

67. /* MQ4 Interaction Media Features*/
pointer: none | coarse | fine
hover: none | hover
any-pointer: none | coarse | fine
any-hover: none | hover
hover: on-demand / any-hover: on-demand removed in recent drafts

68. dev.opera - Interaction Media Features and their potential (for incorrect assumptions)

69. patrickhlauke.github.io/touch/pointer-hover-any-pointer-any-hover
primary input is unchanged (and Chrome/Android required a full restart)

70. /* Naive uses of Interaction Media Features */
@media (pointer: fine) {
/* primary input has fine pointer precision...
so make all buttons/controls small? */
}
@media (hover: hover) {
/* primary input has hover...so we can rely on it? */
}
/* pointer and hover only check "primary" input, but
what if there's a secondary input that lacks capabilities? */

71. /* Better uses of Interaction Media Features */
@media (any-pointer: coarse) {
/* at least one input has coarse pointer precision...
provide larger buttons/controls for touch */
}
/* test for *any* "least capable" inputs (primary or not) */
Limitation: [mediaqueries-4] any-hover can't be used to detect mixed hover and non-hover
capable pointers. Also, pointer / hover / any-pointer / any-hover don't cover non-pointer
inputs (e.g. keyboards) – always assume non-hover-capable inputs
@media (any-hover: none) {
/* at least one input lacks hover capability...
don't rely on it or avoid altogether */
}

72. detect which input the users is
using right now...

73. GitHub: ten1seven / what-input

74. Demo: What Input?

75. if in doubt, offer a way to switch interfaces...
or just always use a touch-optimised interface

76. <¢ interlude >

77. touch events
vs
limitations/problems

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

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

80. patrickhlauke.github.io/touch/tests/event-listener_show-delay.html
less of a problem in modern browsers, but for iOS < 9.3 or older Androids still relevant

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

82. when does the delay happen?

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

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

85. how can we make it feel
responsive like a native app?

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

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

88. touchend for a control that
fires after finger lifted
(but this can result in events firing after zoom/scroll)

89. don't make it touch-exclusive

90. /* DON'T DO THIS:
conditional "touch OR mouse/keyboard" event binding */
if ('ontouchstart' in window) {
// set up event listeners for touch
foo.addEventListener('touchend', ...);
...
} else {
// set up event listeners for mouse/keyboard
foo.addEventListener('click', ...);
...
}

91. patrickhlauke.github.io/touch/tests/event-listener_naive-touch-or-mouse.html

92. /* DO THIS:
doubled-up "touch AND mouse/keyboard" event binding */
// set up event listeners for touch
foo.addEventListener('touchend', ...);
// set up event listeners for mouse/keyboard
foo.addEventListener('click', ...);
/* but this would fire our function twice for touch? */
patrickhlauke.github.io/touch/tests/event-listener_naive-event-doubling.html

93. /* DO THIS:
doubled-up "touch AND mouse/keyboard" event binding */
// set up event listeners for touch
foo.addEventListener('touchend', function(e) {
// prevent compatibility mouse events and click
e.preventDefault();
...
});
// set up event listeners for mouse/keyboard
foo.addEventListener('click', ...);
patrickhlauke.github.io/touch/tests/event-listener_naive-event-doubling-fixed.html

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

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

96. github.com/ftlabs/fastclick

97. patrickhlauke.github.io/touch/fastclick
“ouTube: iOS/Safari 300ms click delay: vanilla Bootstrap and using fastclick.js

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

99. browsers working to remove
double-tap to zoom delay

100. non-scalable/zoomable
viewport and
"double-tap to zoom"

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

102. Changeset 191072 - Web pages with unscalable viewports shouldn't have a single tap delay
(from iOS 9.3 onwards)

103. what about accessibility?

104. Chrome: Settings > Accessibility > Force enable zoom

105. Opera: Settings > Force enable zoom

106. Firefox: Settings > Accessibility > Always enable zoom

107. Samsung Internet: Internet settings > Manual zoom

108. "Force enable zoom" reintroduces delay – a fair compromise?
patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html

109. @thomasfuchs - Safari/iOS10beta3 ignores unscalable viewports
(no official Apple documentation about the change...but the 300ms delay is back)

110. Windows 10 build 15007 on Mobile ignores unscalable viewports

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

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

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

114. WebKit blog: More Responsive Tapping on iOS

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

116. suppressing 300ms delay
if your code does rely on handling click / mouse events:
• "mobile optimised" <meta name="viewport"
content="width=device-width">
• add touch-action:manipulation in CSS (part of Pointer Events)
• use helper library like fastclick.js for older browsers
• make your viewport non-scalable...

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

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

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

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

121. doubling up handling of
mousemove and touchmove

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

123. ¤ar 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... */

124. 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;
// [DOM4] UI Events
readonly attribute unsigned short buttons;
};
www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MouseEvent
www.w3.org/TR/uievents/#events-mouseevents

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

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

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

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

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

130. ¥ar 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 );

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

132. patrickhlauke.github.io/touch/paranoid_0.5
www.splintered.co.uk/experiments/archives/paranoid_0.5

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

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

135. patrickhlauke.github.io/touch/swipe

136. /* Swipe detection from basic principles */
Δt = end.time - start.time;
Δx = end.x - start.x;
Δy = end.y - start.y;
if (( Δt > timeThreshold ) || ( (Δx + Δy) < distanceThreshold )) {
/* too slow or movement too small */
} else {
/* it's a swipe!
- use ¦x and ¦y to determine direction
- pythagoras √( ¦x² + ¦y² ) for distance
- distance/¦t to determine speed */
}

137. don't forget mouse/keyboard!

138. touchmove fires...a lot!

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

140. do heavy lifting (drawing etc.)
separately, avoid queueing
(e.g. using setTimeout and/or requestAnimationFrame )

141. debounce / throttle events

142. GitHub: m-gagne / limit.js

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

144. why stop at a single point?
multitouch support

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

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

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

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

149. iOS7+ Safari/WebView
preventDefault() can't
override edge swipes

150. multitouch gestures

151. /* iOS/Safari/WebView has gesture events for size/rotation,
not part of the W3C Touch Events spec. */
/* gesturestart / gesturechange / gestureend */
foo.addEventListener('gesturechange', function(e) {
/* e.scale
e.rotation */
/* values can be plugged directly into
CSS transforms etc */
});
/* not supported in Chrome/Firefox/Opera */
iOS Developer Library - Safari Web Content Guide - Handling gesture events

152. /* Pinch/rotation detection from basic principles */
Δx = x2 - x1;
Δy = y2 - y1;
/* pythagoras √( §x² + §y² ) to calculate distance */
Δd = Math.sqrt( (Δx * Δx) + (Δy * Δy) );
/* trigonometry to calculate angle */
α = Math.atan2( Δy, Δx );
Mozilla Developer Network: Math.atan2()

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

154. Touch Events specification
grey areas...

155. do touch events fire during
scroll/zoom?

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

157. Touch Events extensions...

158. W3C Touch Events Extensions WG Note

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

160. /* Touch Events – contact geometry */
partial interface Touch {
readonly attribute float radiusX ;
readonly attribute float radiusY ;
readonly attribute float rotationAngle ;
readonly attribute float force;
};

161. patrickhlauke.github.io/touch/tracker/tracker-radius-rotationangle.html
“ouTube: Touch Events: radiusX, radius“ and rotationAngle

162. /* Touch Events – force */
partial interface Touch {
readonly attribute float radiusX;
readonly attribute float radiusY;
readonly attribute float rotationAngle;
readonly attribute float force ;
};
force : value in range 0 – 1 . if no hardware support 0
(some devices, e.g. Nexus 10, "fake" force based on radiusX / radiusY )

163. patrickhlauke.github.io/touch/tracker/tracker-force-pressure.html
iPhone 6s with 3D Touch supports force ...
(Safari and WKWebView, e.g. Chrome/iOS, but not UIWebView, e.g. Firefox/iOS)

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

165. Pointer Events

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

167. in IE10 Microsoft introduced
Pointer Events

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

169. ...and some new inputs (though currently mapped to mouse)
Building Xbox One Apps using HTML and JavaScript
“ouTube: Xbox One Edge Browser sends Pointer Events

170. not just some
not invented here
technology

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

172. Pointer Events - W3C REC 24 February 2015

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

174. caniuse.com: Can I use pointer events?

175. Bug 822898 - Implement pointer events

176. about:config ¨ dom.w3c_pointer_events.enabled

177. ...what about Apple?

178. Microsoft submitted a proof of concept WebKit patch
html5labs.interoperabilitybridges.com/prototypes/...

179. Bug 105463 - Implement pointer events RESOLVED WONTFIX

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

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

183. Apple Pencil currently
indistinguishable from touch
in browser / JavaScript
(no tilt information, fires touch events)

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

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

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

187. IE10/IE11 quirks
• vendor-prefixed in IE10 ( MSPointerDown ...,
navigator.msMaxTouchPoints , -ms-touch-action )
• unprefixed in IE11 (but prefixed versions mapped for compatibility)
• event order (when click is fired) incorrect in IE10/IE11
see W3C Pointer Events WG mailing list - Jacob Rossi (Microsoft)

188. Chrome, Edge (on mobile), IE11 (Windows Phone 8.1update1) support
both Touch Events and Pointer Events
w3c.github.io/pointerevents/#mapping-for-devices-that-do-not-support-hover

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

190. about:flags in Microsoft Edge to turn on touch events on desktop
(e.g. touch-enabled laptops) – off by default for site compatibility

191. ... when touch events also
supported (Edge)
pointerover > pointerenter > pointerdown >
touchstart >
pointerup >
touchend >
mouseover > mouseenter > mousemove > mousedown >
focus >
mouseup >
click >
pointerout > pointerleave
Specific order of events is not defined in the spec in this case – will vary between browsers...
only problem if handling both pointer events and mouse events (which is nonsensical)

192. /* Pointer Events extend Mouse Events
vs Touch Events and their new objects / TouchLists / Touches */
interface PointerEvent : MouseEvent {
readonly attribute long pointerId;
readonly attribute long width;
readonly attribute long height;
readonly attribute float pressure;
readonly attribute float tangentialPressure; /* Level 2 */
readonly attribute long tiltX;
readonly attribute long tiltY;
readonly attribute long twist; /* Level 2 */
readonly attribute DOMString pointerType;
readonly attribute boolean isPrimary;
}

193. handling mouse input is
exactly the same as traditional
mouse events
(only change pointer* instead of mouse* event names)

194. handling touch or stylus is
also exactly the same as
traditional mouse events
(mouse code can be adapted to touch/stylus quickly)

195. simple feature detection for
pointer events

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

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

198. /* detect maximum number of touch points */
if ( navigator.maxTouchPoints > 0 ) {
/* device with a touchscreen */
}
if ( navigator.maxTouchPoints > 1 ) {
/* multitouch-capable device */
}
"you can detect a touchscreen"
...but user may still use other input mechanisms

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

200. do pointer events fire during
scroll/zoom?

201. w3c.github.io/pointerevents/#the-pointercancel-event

202. once a browser handles scrolling, it sends pointercancel
patrickhlauke.github.io/touch/gesture-touch/pointerevents.html

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

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

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

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

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

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

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

210. how can we make it feel
responsive like a native app?

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

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

213. a more declarative approach
with touch-action

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

215. Pointer Events Level 2
expanded set of values (useful for pull-to-refresh, carousels, etc)
touch-action: auto | none |
[ [ pan-x | pan-left | pan-right ] ||
[ pan-y | pan-up | pan-down ] ] |
manipulation
w3c.github.io/pointerevents/#the-touch-action-css-property

216. compat.spec.whatwg.org add extra value pinch-zoom

217. patrickhlauke.github.io/touch/touch-action-scrolling

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

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

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

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

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

223. caniuse.com: Can I use touch-action?

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

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

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

228. "Allow zooming..." option currently missing in Win 10 Mobile

229. Windows 10 build 15007 on Mobile ignores unscalable viewports
no delay until user zooms for first time...

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

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

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

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

234. just listen to pointermove...

235. no need for separate mouse or
touch event listeners

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

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

238. /* Reminder: Touch Events need separate code for x / y coords */
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;
...
}
}
canvas.addEventListener('mousemove', positionHandler, false );
canvas.addEventListener('touchmove', positionHandler, false );

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

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

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

242. but you can distinguish
mouse or touch or stylus

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

244. what about multitouch?

245. /* PointerEvents don't have the handy TouchList objects,
so we have to replicate something similar... */
ar 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 ':
case ' pointercancel ':
/* remove the relevant array entry */
break;
}

246. patrickhlauke.github.io/touch/tracker/multi-touch-tracker-pointer-hud.html
(note multiple isPrimary pointers, per pointer type)

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

248. extended capabilities
(if supported by hardware)

249. /* Pointer Events - pressure */
interface PointerEvent : MouseEvent {
readonly attribute long pointerId;
readonly attribute long width;
readonly attribute long height;
readonly attribute float pressure ;
readonly attribute float tangentialPressure;
readonly attribute long tiltX;
readonly attribute long tiltY;
readonly attribute long twist;
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

250. patrickhlauke.github.io/touch/tracker/...
“ouTube: Touch tracker with Surface 3 pen

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

252. /* Pointer Events - contact geometry */
interface PointerEvent : MouseEvent {
readonly attribute long pointerId;
readonly attribute long width ;
readonly attribute long height ;
readonly attribute float pressure;
readonly attribute float tangentialPressure;
readonly attribute long tiltX;
readonly attribute long tiltY;
readonly attribute long twist;
readonly attribute DOMString pointerType;
readonly attribute boolean isPrimary;
}
if hardware can't detect contact geometry, either 0 or best guess
(e.g. for mouse/stylus, return width / height of 1 )

253. patrickhlauke.github.io/touch/tracker/tracker-width-height.html
“ouTube: Pointer Events width and height ...

254. /* Pointer Events - tilt */
interface PointerEvent : MouseEvent {
readonly attribute long pointerId;
readonly attribute long width;
readonly attribute long height;
readonly attribute float pressure;
readonly attribute float tangentialPressure;
readonly attribute long tiltX ;
readonly attribute long tiltY ;
readonly attribute long twist;
readonly attribute DOMString pointerType;
readonly attribute boolean isPrimary;
}
tiltX / tiltY : value in degrees -90 – 90 .
returns 0 if hardware does not support tilt

255. patrickhlauke.github.io/touch/pen-tracker
“ouTube: ...pen with tilt, pressure and hover support

256. patrickhlauke.github.io/touch/pen-tracker
“ouTube: Chrome on Samsung Galaxy Note 4 - Pointer Events and stylus

257. pointermove fires if any
property changes,
not just x/y position
( width , height , tiltX , tiltY , pressure )

258. pointer events as the future?

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

260. /* cover all cases (hat-tip Stu Cox) */
if (window.PointerEvent) {
/* 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 */

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

262. GitHub - jQuery Pointer Events Polyfill (PEP)

263. adding jQuery PEP *
script src=https:code.jquery.compep0.4.1pep.jsscript
* need to use custom touch-action attribute, not CSS (yet) *
button touch-action=none ...div

264. patrickhlauke.github.io/touch/pep-draw

265. patrickhlauke.github.io/touch/pep/listener/event-listener.html

266. debugging/testing

267. nothing beats having real devices...

268. Chrome DevTools / Device Mode Mobile Emulation
correctly emulates touch and pointer events

269. Firefox Developer Tools Responsive Design Mode
correctly emulates touch events

270. no touch emulation, nor touch events + pointer events (like on real
Windows 10 Mobile) emulation, in Edge/F12 Tools

271. no touch emulation in Safari Responsive Design Mode

272. youtube.com/watch?v=A”KpByV5764

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