Beyond smartphones and tablets, touchscreens are finding their way into laptops and even desktop computers. With hardware support for touch becoming increasingly ubiquitous, it's time to explore what new possibilities are available to developers. This session will cover the basics of handling touch events - from making sure simple single-tap interactions are as responsive as possible, all the way to examples of full multitouch, gesture-enabled elements.

1. gettingtouchy
ANINTRODUCTIONTOTOUCHANDPOINTEREVENTS
Patrick H. Lauke / TPAC 2016 / 19 September 2016

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. “how can I make my website
work on touch devices?”

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

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

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

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

9. emulation works,
but is limiting/problematic

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

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

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

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

14. touchstart
touchmove
touchend
touchcancel

15. doubling up handling of
mousemove and touchmove

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

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

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

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

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

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

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

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

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

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

26. why stop at a single point?
multitouch support

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

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

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

30. Touch Events extensions...

31. W3C Touch Events Extensions WG Note

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

33. patrickhlauke.github.io/touch/tracker/tracker-radius-rotationangle.html
YouTube: Touch Events: radiusX, radiusY and rotationAngle

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

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

36. W3C Touch Events Community Group

37. hybrid devices
touch + mouse + keyboard

40. in IE10 Microsoft introduced
Pointer Events

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

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

43. Pointer Events - W3C REC 24 February 2015

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

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

46. ...what about Apple?

47. Bug 105463 - Implement pointer events RESOLVED WONTFIX

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

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

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

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

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

54. are pointer events better?

55. no need for separate mouse or
touch event listeners

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

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

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

59. but you can distinguish
mouse or touch or stylus

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

61. what about multitouch?

62. /* 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 ':
case ' pointercancel ':
/* remove the relevant array entry */
break;
}

63. patrickhlauke.github.io/touch/tracker/multi-touch-tracker-pointer-hud.html

64. extended capabilities
(if supported by hardware)

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

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

67. /* 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 long tiltX;
readonly attribute long tiltY;
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 )

68. patrickhlauke.github.io/touch/tracker/tracker-width-height.html
YouTube: Pointer Events width and height ...

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

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

71. pointer events as the future?

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

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

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

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

76. GitHub - jQuery Pointer Events Polyfill (PEP)

77. /* adding jQuery PEP */
<script src="https://code.jquery.com/pep/0.4.1/pep.js"></script>

78. Alex Schmitz' PEP demo

79. youtube.com/watch?v=AZKpByV5764

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