This document provides an introduction to touch events for websites. It discusses how browsers emulate mouse events on touch devices and the limitations of this approach. Native touch events like touchstart, touchmove, and touchend are introduced as alternatives. The document covers issues like delayed event dispatching and handling both mouse and touch. It also discusses more advanced topics like multitouch support, gestures, and debugging touch events. Overall, the document serves as a guide to making websites more responsive on touch-enabled devices.

1. getting touchy
AN INTRODUCTION TO TOUCH EVENTS
Patrick H. Lauke / Webinale / Berlin / 4 Juni 2013

2. webkrauts.de/artikel/2012/einfuehrung-touch-events

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

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

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

6. mouseover > mousemove* > mousedown >
(focus) > mouseup > click
*only a single “sacrificial” events is fired

7. on first tap
mouseover > mousemove > mousedown >
(focus) > mouseup > click
subsequent taps
mousemove > mousedown > (focus) >
mouseup > click
tapping away
mouseout > (blur)
focus/blur only on focusable elements in Opera Mobile and Firefox
mouseout not on iOS Safari and embedded WebView (e.g. iOS Chrome)

8. emulation works but is
limiting/problematic
(more on that in a minute)

9. 1. delayed event dispatch
2. mouse-specific interfaces
3. mousemove doesn't track

10. 1. delayed event dispatch
2. mouse-specific interfaces
3. mousemove doesn't track

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

12. 1. delayed event dispatch
2. mouse-specific interfaces
3. mousemove doesn't track

13. vimeo.com/ondemand

14. 1. delayed event dispatch
2. mouse-specific interfaces
3. mousemove doesn't track

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

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

17. touch events
introduced in iOS, adopted in Chrome/Firefox/Opera
www.w3.org/TR/touch-events

18. touchstart
touchmove
touchend
touchcancel

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

20. touchstart > [touchmove]+ > touchend >
mouseover > mousemove > mousedown >
(focus) > mouseup > click

21. on first tap
touchstart > [touchmove]+ > touchend > mouseover >
mousemove > mousedown > (focus) > mouseup > click
subsequent taps
touchstart > [touchmove]+ > touchend > mousemove >
mousedown > (focus) > mouseup > click
tapping away
mouseout > (blur)
too many touchmove events abort the tap (after touchend)
not all browsers consistently send the touchmove
some browsers outright weird...

22. Browser/Android 4.2.2
(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

23. touch events
vs
limitations/problems of
mouse event emulation

24. 1. delayed event dispatch
2. mouse-specific interfaces
3. mousemove doesn't track

25. 1. delayed event dispatch
2. mouse-specific interfaces
3. mousemove doesn't track

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

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

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

29. simple feature detection for
touch events

30. if ('ontouchstart' in window) {
/* some clever stuff here */
}

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

32. don't make it touch-exclusive

33. hacks.mozilla.org/2013/04/detecting-touch...

34. if ('ontouchstart' in window) {
/* browser supports touch events
but user is not necessarily
using touch (exclusively) */
}

35. hybrid devices
touch + mouse + keyboard

37. Android + mouse – behaves like touch
touchstart > touchend > mouseover > mousemove > mousedown > mouseup > click

38. Blackberry PlayBook 2.0 + mouse – like desktop mouse
mouseover > mousedown > mousemove > mouseup > click

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

40. VoiceOver enables keyboard access on iOS

41. iOS + keyboard – similar to touch
focus > touchstart > touchend > mouseover > mousemove > mousedown
blur > mouseup > click

42. iOS + VoiceOver – similar to touch
focus > touchstart > touchend > mouseover > mousemove > mousedown
blur > mouseup > click

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

44. mouse or touch
vs
mouse and touch and
keyboard

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

46. /* doubled-up event listeners */
foo.addEventListener('touchstart',
function(e) {
/* prevent delay + mouse events */
e.preventDefault();
someFunction();
/* or even e.target.click(); */
}, false);
foo.addEventListener('click',
someFunction, false);

47. preventDefault
kills scrolling, long-press,
pinch/zoom

49. browsers working to remove
delay when possible
e.g. Chrome on desktop, Chrome/Firefox on Android

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

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

53. 1. delayed event dispatch
2. mouse-specific interfaces
3. mousemove doesn't track

54. vimeo.com/ondemand

57. no isolated hover (or focus)
on touch devices*
* iOS fakes it, Samsung Galaxy S4 + stylus, ...

58. http://developer.apple.com/library/IOS/...

59. avoid hover-based interfaces?
complement for keyboard / touch!

60. Modernizr issue 869: Detecting a mouse user

61. www.stucox.com/blog/you-cant-detect-a-touchscreen

62. 1. delayed event dispatch
2. mouse-specific interfaces
3. mousemove doesn't track

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

64. touchstart > [touchmove]+ > touchend >
mouseover > mousemove* > mousedown >
(focus) > mouseup > click
*mouse event emulation fires only a single mousemove

65. doubling up handling of
mousemove and touchmove

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

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

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

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

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

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

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

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

74. tracking finger movement
=> swipe gestures

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

76. don't forget mouse/keyboard !

77. bradfrostweb.com/demo/mobile-first

78. touchmove fires...a lot!

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

80. heavy javascript on
requestAnimationFrame
setInterval

81. why stop at a single point?
multitouch support

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

83. for (i=0; i<e.targetTouches.length; i++) {
...
posX = e.targetTouches[i].clientX;
posY = e.targetTouches[i].clientY;
...
}

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

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

86. multitouch gestures

87. /* iOS/Safari has gesture events for size/rotation,
not supported in Chrome/Firefox/Opera,
not part of the W3C Touch Events spec.
With some trigonometry we can replicate these
from basic principles. */
var distance = Math.sqrt(Math.pow(...)+Math.pow(...));
var angle = Math.atan2(...);

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

89. shinydemos.com/picture-organizer

90. www.html5rocks.com/en/mobile/touchandmouse

91. touch events and IE10

92. blogs.msdn.com/...

93. www.w3.org/TR/pointerevents

94. pointerover > mouseover >
pointerdown > mousedown >
pointermove > mousemove >
(focus) >
pointerup > mouseup >
pointerout > mouseout >
click
mouse events fired “inline” with pointer events!

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

96. /* 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;
};
www.w3.org/TR/pointerevents/#pointerevent-interface

97. preventDefault() won't work
touch-action: auto|none|[pan-x][pan-y]
www.w3.org/TR/pointerevents/#the-touch-action-css-property

98. blogs.msdn.com/b/davrous/.../handling-touch-in-your-html5-apps...

99. html5labs.interoperabilitybridges.com/prototypes/...

100. handjs.codeplex.com

101. /* like iOS/Safari, IE10/Win has higher-level gestures,
but these are not part of the W3C Pointer Events spec.
Replicate these from basic principles again? */

102. www.exploretouch.ie/behind-the-scenes

103. debugging/testing

104. Issue 181204: Emulate touch events - event order different from real devices

105. developers.google.com/chrome-developer-tools/docs/console#monitoring_events

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

108. youtube.com/watch?v=AZKpByV5764

109. danke
@patrick_h_lauke
github.com/patrickhlauke/touch
slideshare.net/redux
paciellogroup.com
splintered.co.uk