getting touchy - an introduction to touch events / webinale / berlin 04.06.2013
TRANSCRIPT
getting touchy AN INTRODUCTION TO TOUCH EVENTS
Patrick H. Lauke / Webinale / Berlin / 4 Juni 2013
webkrauts.de/artikel/2012/einfuehrung-touch-events
how can I make my website work on touch devices?
you don't need touch eventsbrowsers emulate regular mouse events
patrickhlauke.github.io/touch/tests/event-listener_mouse-only.html
mouseover > mousemove* > mousedown > (focus) > mouseup > click
*only a single “sacrificial” events is fired
on first tapmouseover > mousemove > mousedown >
(focus) > mouseup > click
subsequent tapsmousemove > mousedown > (focus) >
mouseup > click
tapping awaymouseout > (blur)
focus/blur only on focusable elements in Opera Mobile and Firefoxmouseout not on iOS Safari and embedded WebView (e.g. iOS Chrome)
emulation works but is limiting/problematic
(more on that in a minute)
1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesn't track
1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesn't track
patrickhlauke.github.io/touch/tests/event-listener_show-delay.html
1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesn't track
1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesn't track
“we need to go deeper...”
touch eventsintroduced in iOS, adopted in Chrome/Firefox/Opera
www.w3.org/TR/touch-events
touchstart
touchmovetouchend
touchcancel
patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html
touchstart > [touchmove]+ > touchend > mouseover > mousemove > mousedown >
(focus) > mouseup > click
on first taptouchstart > [touchmove]+ > touchend > mouseover > mousemove > mousedown > (focus) > mouseup > click
subsequent tapstouchstart > [touchmove]+ > touchend > mousemove >
mousedown > (focus) > mouseup > click
tapping awaymouseout > (blur)
too many touchmove events abort the tap (after touchend)not all browsers consistently send the touchmove
some browsers outright weird...
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
touch eventsvs
limitations/problems of mouse event emulation
1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesn't track
1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesn't track
patrickhlauke.github.io/touch/tests/event-listener_show-delay.html
patrickhlauke.github.io/touch/tests/event-listener.html
“how can we make it feel responsive like a native app?”
simple feature detection for touch events
if ('ontouchstart' in window) {
/* some clever stuff here */
}
/* common performance “trick” */
var clickEvent = ('ontouchstart' in window ? 'touchend' : 'click');
blah.addEventListener(clickEvent,function() { ... }, false);
don't make it touch-exclusive
hacks.mozilla.org/2013/04/detecting-touch...
if ('ontouchstart' in window) {
/* browser supports touch events but user is not necessarily using touch (exclusively) */
}
hybrid devicestouch + mouse + keyboard
Android + mouse – behaves like touchtouchstart > touchend > mouseover > mousemove > mousedown > mouseup > click
Blackberry PlayBook 2.0 + mouse – like desktop mousemouseover > mousedown > mousemove > mouseup > click
Android + keyboard – like desktop keyboardfocus > click
VoiceOver enables keyboard access on iOS
iOS + keyboard – similar to touchfocus > touchstart > touchend > mouseover > mousemove > mousedown
blur > mouseup > click
iOS + VoiceOver – similar to touchfocus > touchstart > touchend > mouseover > mousemove > mousedown
blur > mouseup > click
Android + TalkBack – keyboard/mouse hybridfocus > blur > mousedown > mouseup > click > focus(?)
mouse or touchvs
mouse and touch and keyboard
/* doubled-up event listeners */
foo.addEventListener('touchstart', someFunction, false);
foo.addEventListener('click', someFunction, false);
/* 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);
preventDefaultkills scrolling, long-press,
pinch/zoom
browsers working to remove delay when possible
e.g. Chrome on desktop, Chrome/Firefox on Android
patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html
patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html
1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesn't track
no isolated hover (or focus) on touch devices*
* iOS fakes it, Samsung Galaxy S4 + stylus, ...
http://developer.apple.com/library/IOS/...
avoid hover-based interfaces?
complement for keyboard / touch!
www.stucox.com/blog/you-cant-detect-a-touchscreen
1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesn't track
touchstart > [touchmove]+ > touchend > mouseover > mousemove* > mousedown >
(focus) > mouseup > click
*mouse event emulation fires only a single mousemove
doubling up handling of mousemove and touchmove
var posX, posY;
...
function positionHandler(e) {posX = e.clientX;posY = e.clientY;
}
...
canvas.addEventListener('mousemove', positionHandler, false);
var posX, posY;
...
function positionHandler(e) {/* handle both mouse and touch? */
}
...
canvas.addEventListener('mousemove',positionHandler, false);
canvas.addEventListener('touchmove',positionHandler, false);
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
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
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
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 );
tracking finger movement=> swipe gestures
don't forget mouse/keyboard !
touchmove fires...a lot!
heavy javascript on requestAnimationFrame
setInterval
why stop at a single point?multitouch support
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
for (i=0; i<e.targetTouches.length; i++) {
...
posX = e.targetTouches[i].clientX;posY = e.targetTouches[i].clientY;
...
}
patrickhlauke.github.io/touch/tracker/multi-touch-tracker.html
iOS/iPad even preventDefault()can't override 4-finger gestures
multitouch gestures
/* 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(...);
patrickhlauke.github.io/touch/pinch-zoom-rotate
touch events and IE10
blogs.msdn.com/...
pointerover > mouseover > pointerdown > mousedown > pointermove > mousemove >
(focus) > pointerup > mouseup >
pointerout > mouseout > click
mouse events fired “inline” with pointer events!
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
/* 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
preventDefault() won't work
touch-action: auto|none|[pan-x][pan-y]
www.w3.org/TR/pointerevents/#the-touch-action-css-property
blogs.msdn.com/b/davrous/.../handling-touch-in-your-html5-apps...
html5labs.interoperabilitybridges.com/prototypes/...
/* 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? */
debugging/testing
Issue 181204: Emulate touch events - event order different from real devices
developers.google.com/chrome-developer-tools/docs/console#monitoring_events
Bug 861876 - [...] multiple mousemoves being fired
danke@patrick_h_lauke
github.com/patrickhlauke/touchslideshare.net/redux
paciellogroup.comsplintered.co.uk