The document describes different types of touch and mouse events that occur during interactions on touchscreen and non-touchscreen devices. It provides details on events like touchstart, touchmove, touchend, mouseover, mousedown etc. and discusses how to handle these events consistently across device types using the Pointer Events API.

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