View
106
Download
1
Category
Tags:
Preview:
DESCRIPTION
Citation preview
getting touchy AN INTRODUCTION TO TOUCH EVENTS
Patrick H. Lauke / Sainté Mobile Days / Saint-Etienne / 22 November 2013
“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
patrickhlauke.github.io/touch/tests/event-listener_mouse-only.html
mouseover > mousemove* > mousedown > (focus) > mouseup > click
*only a single “sacrificial” event is fired
emulation works,but is limiting/problematic
1. delayed event dispatch2. mousemove doesn't trackthere are more (e.g. no concept of hover on touchscreens)
1. delayed event dispatch2. mousemove doesn't track
patrickhlauke.github.io/touch/tests/event-listener_show-delay.html
patrickhlauke.github.io/touch/tests/event-listener_show-delay.html
1. delayed event dispatch2. mousemove doesn't track
patrickhlauke.github.io/touch/particle/2(bug in iOS7: moving finger does seem to scroll and fire multiple mousemove events?!)
“we need to go deeper...”
touch eventsintroduced in iOS 2.0, adopted in Chrome/Firefox/Opera
www.w3.org/TR/touch-events
touchstarttouchmove
touchend
touchcanceltouchentertouchleave
patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html
patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html
touchstart > [touchmove]+ > touchend > mouseover > mousemove > mousedown >
(focus) > mouseup > click
Browser/Android 4.3(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
1. delayed event dispatch2. mousemove doesn't track
1. delayed event dispatch2. mousemove doesn't track
patrickhlauke.github.io/touch/tests/event-listener.html
patrickhlauke.github.io/touch/tests/event-listener.html
“how can we make it feel responsive like a native app?”
react to events fired before the 300ms delay...
interlude: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
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
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(?)
touch or mouse or keyboard
touch and mouse and keyboard
/* doubled-up event listeners */
foo.addEventListener('touchend', someFunction, false);
foo.addEventListener('click', someFunction, false);
/* doubled-up event listeners */
foo.addEventListener('touchend',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
patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html
patrickhlauke.github.io/touch/tests/event-listener_minimum-maximum-scale.html
patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html
[...] no more 300ms click delay, or double-tap zoom, on mobile websites
patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html
iOS/Safari designed themselves into a cornerwith “double-tap to scroll”
bugs.webkit.org/show_bug.cgi?id=122212
1. delayed event dispatch2. mousemove doesn't track
patrickhlauke.github.io/touch/particle/2(bug in iOS7: moving finger does seem to scroll and fire multiple mousemove events?!)
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 movementover time ... swipe gestures
don't forget mouse/keyboard !
touchmove fires...a lot!
do absolute minimum on each touchmove
(usually: store new coordinates)
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
iOS7/Safari even preventDefault()can't override back/forward swipe gestures
/* iOS/Safari has gesture events for size/rotation not supported in Chrome/Firefox, not part of the W3C Touch Events specification. With some trigonometry we can replicate these from basic principles. */
var distance = Math.sqrt(Math.pow(...)+Math.pow(...));var angle = Math.atan2(...);
touch events andInternet Explorer...
blogs.msdn.com/...
not just some “not invented here” new approach for IE10+
active development by Mozilla and Chrome teams
...Apple?
but that's probably enough for now...
pour en savoir plus:
rendez-vous à l'atelier demain matin
@patrick_h_lauke
github.com/patrickhlauke/touchslideshare.net/redux
paciellogroup.comsplintered.co.uk
Recommended