More Related Content Similar to An Introduction to Touch Events Similar to An Introduction to Touch Events (20) More from Patrick Lauke (20) 2. how can I make my website
work on touch devices?
5. mouseover > mousemove* > mousedown >
(focus) > mouseup > click
*only a single “sacrificial” events is fired
6. 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)
13. 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...
17. 1. delayed event dispatch
2. mouse-specific interfaces
3. mousemove doesn't track
18. 1. delayed event dispatch
2. mouse-specific interfaces
3. mousemove doesn't track
21. “how can we make it feel
responsive like a native app?”
24. /* common performance “trick” */
var clickEvent = ('ontouchstart' in window ?
'touchend' : 'click');
blah.addEventListener(clickEvent,
function() { ... }, false);
28. if ('ontouchstart' in window) {
/* browser supports touch events
but user is not necessarily
using touch (exclusively) */
}
31. Android + mouse – behaves like touch
touchstart > touchend > mouseover > mousemove > mousedown > mouseup > click
35. iOS + keyboard – similar to touch
focus > touchstart > touchend > mouseover > mousemove > mousedown
blur > mouseup > click
37. /* doubled-up event listeners */
foo.addEventListener('touchstart',
someFunction, false);
foo.addEventListener('click',
someFunction, false);
38. /* 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);
42. 1. delayed event dispatch
2. mouse-specific interfaces
3. mousemove doesn't track
46. no isolated hover (or focus)
on touch devices*
* iOS fakes it, Samsung Galaxy S4 + stylus, ...
50. 1. delayed event dispatch
2. mouse-specific interfaces
3. mousemove doesn't track
52. touchstart > [touchmove]+ > touchend >
mouseover > mousemove* > mousedown >
(focus) > mouseup > click
*mouse event emulation fires only a single mousemove
54. var posX, posY;
...
function positionHandler(e) {
posX = e.clientX;
posY = e.clientY;
}
...
canvas.addEventListener('mousemove',
positionHandler, false);
55. var posX, posY;
...
function positionHandler(e) {
/* handle both mouse and touch? */
}
...
canvas.addEventListener('mousemove',
positionHandler, false);
canvas.addEventListener('touchmove',
positionHandler, false);
56. 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
57. 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
58. 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
59. 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 );
70. 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
75. /* 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(...);
82. pointerover > mouseover >
pointerdown > mousedown >
pointermove > mousemove >
(focus) >
pointerup > mouseup >
pointerout > mouseout >
click
mouse events fired “inline” with pointer events!
83. 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
84. /* 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
89. /* 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? */
