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

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

github.com/ftlabs/fastclick

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

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

patrickhlauke.github.io/touch/particle/3

tracking finger movementover time ... swipe gestures

patrickhlauke.github.io/touch/swipe

patrickhlauke.github.io/touch/swipe

patrickhlauke.github.io/touch/picture-slider

don't forget mouse/keyboard !

touchmove fires...a lot!

do absolute minimum on each touchmove

(usually: store new coordinates)

heavy JavaScript on requestAnimationFrame

setInterval

patrickhlauke.github.io/touch/touch-limit

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

shinydemos.com/picture-organizer

touch events andInternet Explorer...

blogs.msdn.com/...

www.w3.org/TR/pointerevents

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