7. mouseover > mousemove* > mousedown >
(focus) > mouseup > click

8. mouseover > mousemove > mousedown >
(focus) > mouseup > click
mousemove > mousedown > (focus) >
mouseup > click
mouseout > (blur)
focus/blur
mouseout

20. touchstart
touchmove
touchend
touchcancel
touchenter
touchleave

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

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

25. mouseover > mousemove > touchstart > touchend > mousedown >
mouseup > click
touchstart > mouseover > mousemove > mousedown > touchend >
mouseup > click

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

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

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

42. touchstart > touchend > mouseover > mousemove > mousedown > mouseup > click

43. mouseover > mousedown > mousemove > mouseup > click

44. focus > click

46. focus > touchstart > touchend > mouseover > mousemove > mousedown
blur > mouseup > click

47. focus > touchstart > touchend > mouseover > mousemove > mousedown
blur > mouseup > click

48. focus > blur > mousedown > mouseup > click > focus(?)

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

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

54. preventDefault

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

68. mousemove
touchmove

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

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

71. interface MouseEvent :
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
relatedTarget;
void
};
UIEvent {
long
long
long
long
boolean
boolean
boolean
boolean
unsigned short
EventTarget
screenX;
screenY;
clientX;
clientY;
ctrlKey;
shiftKey;
altKey;
metaKey;
button;
initMouseEvent(...);

72. interface TouchEvent :
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
};
UIEvent {
TouchList
TouchList
TouchList
boolean
boolean
boolean
boolean
touches;
targetTouches;
changedTouches;
altKey;
metaKey;
ctrlKey;
shiftKey;

73. interface Touch {
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
};
long
EventTarget
long
long
long
long
long
long
identifier;
target;
screenX;
screenY;
clientX;
clientY;
pageX;
pageY;

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

85. touchmove

86. touchmove

87. requestAnimationFrame
setInterval

90. interface TouchEvent :
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
};
UIEvent {
TouchList
TouchList
TouchList
boolean
boolean
boolean
boolean
touches;
targetTouches;
changedTouches;
altKey;
metaKey;
ctrlKey;
shiftKey;

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

93. preventDefault()

94. preventDefault()

96. /* iOS/Safari has gesture events for size/rotation,
not supported in Chrome/Firefox/Opera,
not part of the W3C Touch Events spec. */
gesturestart, gesturechange, gestureend
e.scale, e.rotation

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

109. pointerover > mouseover >
pointerdown > mousedown >
pointermove > mousemove >
(focus) >
pointerup > mouseup >
pointerout > mouseout >
click

110. pointerenter
pointerleave
gotpointercapture
lostpointercapture

111. MSPointerDown
MSPointerMove
MSPointerUp
navigator.msPointerEnabled
navigator.msMaxTouchPoints
-ms-touch-action

112. interface MouseEvent :
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
relatedTarget;
void
};
UIEvent {
long
long
long
long
boolean
boolean
boolean
boolean
unsigned short
EventTarget
screenX;
screenY;
clientX;
clientY;
ctrlKey;
shiftKey;
altKey;
metaKey;
button;
initMouseEvent(...);

113. /* Pointer Events extend Mouse Events
vs Touch Events and their completely new objects/arrays */
interface PointerEvent : MouseEvent
readonly
attribute long
readonly
attribute long
readonly
attribute long
readonly
attribute float
readonly
attribute long
readonly
attribute long
readonly
attribute DOMString
readonly
attribute boolean
};
{
pointerId;
width;
height;
pressure;
tiltX;
tiltY;
pointerType;
isPrimary;

120. preventDefault()
pointerdown

121. touch-action: auto|none|[pan-x][pan-y]

122. touch-action:none

124. touch-action:none

127. touch-action:none

131. /* PointerEvents don't have the handy touch arrays,
so we have to replicate something similar... */

132. /* PointerEvents don't have the handy touch arrays,
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;
}

134. /* 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? */