patrick h. lauke - getting touchy; an introduction to touch and pointer events
DESCRIPTION
Beyond smartphones and tablets, touchscreens are finding their way into laptops and even desktop computers. With hardware support for touch becoming increasingly ubiquitous, it's time to explore what new possibilities are available to developers. This session will cover the basics of handling touch events - from making sure simple single-tap interactions are as responsive as possible, all the way to full multitouch, gesture-enabled, cross-browser interface elements.TRANSCRIPT
![Page 1: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/1.jpg)
getting touchyAN INTRODUCTION TO TOUCH AND POINTER EVENTS
Patrick H. Lauke / DevConFu / Jūrmala, Latvia / 29 May 2014
![Page 4: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/4.jpg)
“how can I make my websitework on touch devices?”
![Page 5: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/5.jpg)
you don't need touch eventsbrowsers emulate regular
mouse events
![Page 6: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/6.jpg)
patrickhlauke.github.io/touch/tests/event-listener_mouse-only.html
![Page 7: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/7.jpg)
patrickhlauke.github.io/touch/tests/event-listener_mouse-only.html
![Page 8: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/8.jpg)
compatibility mouse events(mouseenter) > mouseover > mousemove* > mousedown >
(focus) > mouseup > click
* only a single “sacrificial” mousemove event fired
![Page 9: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/9.jpg)
on first tap(mouseenter) > mouseover > mousemove >
mousedown > (focus) > mouseup > click
subsequent tapsmousemove > mousedown > mouseup > click
tapping awaymouseout > (blur)
focus / blur only on focusable elements in Firefoxmouseout not on iOS Safari/WebView (e.g. iOS Chrome)
Opera Mobile and
![Page 10: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/10.jpg)
emulation works,but is limiting/problematic
![Page 11: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/11.jpg)
1. delayed event dispatch2. mousemove doesn't track
![Page 12: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/12.jpg)
1. delayed event dispatch2. mousemove doesn't track
![Page 13: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/13.jpg)
patrickhlauke.github.io/touch/tests/event-listener_show-delay.html
![Page 14: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/14.jpg)
patrickhlauke.github.io/touch/tests/event-listener_show-delay.html
![Page 15: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/15.jpg)
1. delayed event dispatch2. mousemove doesn't track
![Page 17: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/17.jpg)
patrickhlauke.github.io/touch/particle/2
(iOS7 bug: moving finger fires mousemove on scroll)
![Page 18: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/18.jpg)
“we need to go deeper...”
![Page 19: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/19.jpg)
touch events
introduced by Apple, adoptedin Chrome/Firefox/Opera
www.w3.org/TR/touch-events
![Page 20: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/20.jpg)
touchstarttouchmovetouchend
touchcancel
touchentertouchleave
![Page 21: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/21.jpg)
patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html
![Page 22: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/22.jpg)
patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html
Bug 128534 - 'mouseenter' mouse compat event not fired...
![Page 23: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/23.jpg)
events fired on taptouchstart > [touchmove]+ > touchend >
(mouseenter) > mouseover > mousemove > mousedown >(focus) > mouseup > click
(mouse events only fired for single-finger tap)
![Page 24: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/24.jpg)
on first taptouchstart > [touchmove]+ > touchend >
(mouseenter) > mouseover > mousemove > mousedown >(focus) > mouseup > click
subsequent tapstouchstart > [touchmove]+ > touchend >mousemove > mousedown > mouseup > click
tapping awaymouseout > (mouseleave) > (blur)
![Page 25: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/25.jpg)
• too many touchmove events prevent mouse compatibility events
after touchend (not considered a "clean" tap)
• too many touchmove events on activatable elements can lead to
touchcancel (in old Chrome/Browser versions)
• not all browsers consistently send the touchmove
some browsers outright weird...
![Page 26: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/26.jpg)
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
![Page 28: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/28.jpg)
touch eventsvs
limitations/problems
![Page 29: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/29.jpg)
1. delayed event dispatch2. mousemove doesn't track
![Page 30: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/30.jpg)
1. delayed event dispatch2. mousemove doesn't track
![Page 31: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/31.jpg)
patrickhlauke.github.io/touch/tests/event-listener_show-delay.html
![Page 32: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/32.jpg)
why the delay?double-tap to zoom
(mostly anyway)
![Page 33: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/33.jpg)
what if browsers didn't wait?
![Page 34: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/34.jpg)
Puffin/Android double-tap zooms and fires mouse events + click(also, doesn't support touch events)
![Page 36: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/36.jpg)
when does the delay happen?
![Page 37: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/37.jpg)
patrickhlauke.github.io/touch/tests/event-listener.html
![Page 38: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/38.jpg)
touch / mouse events delaytouchstart > [touchmove]+ > touchend >
[300ms delay]
(mouseenter) > mouseover > mousemove > mousedown >(focus) > mouseup > click
![Page 39: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/39.jpg)
“how can we make it feelresponsive like a native app?”
![Page 40: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/40.jpg)
react to events fired before the300ms delay...
![Page 41: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/41.jpg)
touchstart for an “immediate”control
(fire/jump button on a game)
![Page 42: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/42.jpg)
touchend for a control thatfires after finger lifted
![Page 43: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/43.jpg)
interlude: simple featuredetection for touch events
![Page 44: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/44.jpg)
/* feature detection for touch events */
if ( 'ontouchstart' in window ) { /* some clever stuff here */}
/* older browsers have flaky support so more hacky tests needed...use Modernizr.touch or similar */
![Page 45: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/45.jpg)
/* common performance “trick” */
var clickEvent = ( 'ontouchstart' in window ? 'touchend' : 'click' );
blah.addEventListener( clickEvent , function() { ... }, false);
![Page 46: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/46.jpg)
don't make it touch-exclusive
![Page 47: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/47.jpg)
/* common performance “trick” */
var clickEvent = ( 'ontouchstart' in window ? 'touchend' : 'click');
...
/* if touch events are supported, only listen to touchend, not click */
![Page 48: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/48.jpg)
hybrid devicestouch + mouse + keyboard
![Page 49: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/49.jpg)
![Page 50: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/50.jpg)
![Page 51: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/51.jpg)
![Page 52: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/52.jpg)
![Page 53: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/53.jpg)
![Page 54: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/54.jpg)
Android + mouse – behaves like touchtouchstart > touchend > mouseover > mousemove > mousedown >
(focus) > mouseup > click
![Page 55: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/55.jpg)
Blackberry PlayBook 2.0 + mouse - like desktopmouse mouseover > mousedown > mousemove > mouseup > click
![Page 56: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/56.jpg)
Android + keyboard – like desktop keyboardfocus > click
![Page 57: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/57.jpg)
iOS + VoiceOver (with/without keyboard) – similar to touchfocus > touchstart > touchend > (mouseenter) > mouseover >
mousemove > mousedown > blur > mouseup > click
![Page 58: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/58.jpg)
Android + TalkBack – keyboard/mouse hybridfocus > blur > mousedown > mouseup > click > focus(?)
![Page 59: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/59.jpg)
hacks.mozilla.org - Detecting touch [...]
![Page 60: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/60.jpg)
/* feature detection for touch events */
if ('ontouchstart' in window) { /* browser supports touch events but user is not necessarily using touch (exclusively) */
/* it could be a mobile, tablet, desktop, fridge ... */}
![Page 61: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/61.jpg)
touch or mouse or keyboard
![Page 62: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/62.jpg)
touch and mouse and keyboard
![Page 63: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/63.jpg)
/* doubled-up event listeners */
foo.addEventListener(' touchend ', someFunction, false);foo.addEventListener(' click ', someFunction, false);
![Page 64: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/64.jpg)
/* prevent delay + mouse events */
foo.addEventListener(' touchstart ', function(e) { e.preventDefault();}, false);
/* doubled-up event listeners */
foo.addEventListener('touchend', someFunction, false);foo.addEventListener('click', someFunction, false);
![Page 65: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/65.jpg)
preventDefault() killsscrolling, pinch/zoom, etc
![Page 66: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/66.jpg)
apply preventDefault()carefully
(just on buttons/links, not entire page)
![Page 68: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/68.jpg)
browsers working to removedouble-tap to zoom delay
(when page not zoomable)
![Page 69: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/69.jpg)
<meta name="viewport" content="user-scalable=no">patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html
![Page 70: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/70.jpg)
<meta name="viewport" content="user-scalable=no">patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html
![Page 71: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/71.jpg)
... content="minimum-scale=1, maximum-scale=1"patrickhlauke.github.io/touch/tests/event-listener_minimum-maximum-scale.html
![Page 72: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/72.jpg)
... content="minimum-scale=1, maximum-scale=1"patrickhlauke.github.io/touch/tests/event-listener_minimum-maximum-scale.html
![Page 73: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/73.jpg)
Bug 922896 - Optimizations to remove 300ms [...] delay[RESOLVED - FIXED]
![Page 74: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/74.jpg)
what about accessibility?
![Page 75: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/75.jpg)
![Page 76: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/76.jpg)
patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html
![Page 77: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/77.jpg)
Chrome 32+ / Android: ... content="width=device-width"updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away
![Page 78: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/78.jpg)
Bug 941995 - Remove 300ms [...] on "responsive" pages
![Page 79: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/79.jpg)
patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html
![Page 80: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/80.jpg)
iOS/Safari designed themselves into a corner: “double-tap to scroll”bugs.webkit.org/show_bug.cgi?id=122212
![Page 81: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/81.jpg)
1. delayed event dispatch2. mousemove doesn't track
![Page 83: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/83.jpg)
patrickhlauke.github.io/touch/particle/2(iOS7 bug: moving finger fires mousemove on scroll)
![Page 84: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/84.jpg)
events fired on taptouchstart > [touchmove]+ > touchend >
(mouseenter) > mouseover >mousemove* > mousedown > (focus) >
mouseup > click
* mouse event emulation fires only a single mousemove
too many touchmove events prevent mouse compatibility events after touchend
![Page 85: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/85.jpg)
doubling up handling ofmousemove and touchmove
![Page 86: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/86.jpg)
var posX, posY;...function positionHandler(e) { posX = e.clientX ; posY = e.clientY ;}...canvas.addEventListener(' mousemove ', positionHandler, false);
![Page 87: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/87.jpg)
var posX, posY;...function positionHandler(e) { /* handle both mouse and touch */}...canvas.addEventListener(' mousemove ', positionHandler, false);canvas.addEventListener(' touchmove ', positionHandler, false);
![Page 88: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/88.jpg)
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
![Page 89: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/89.jpg)
partial interface MouseEvent { readonly attribute double screenX; readonly attribute double screenY; readonly attribute double pageX ; readonly attribute double pageY ; readonly attribute double clientX; readonly attribute double clientY; readonly attribute double x ; readonly attribute double y ; readonly attribute double offsetX ; readonly attribute double offsetY ;};
www.w3.org/TR/cssom-view/#extensions-to-the-mouseevent-interface
![Page 90: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/90.jpg)
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
![Page 91: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/91.jpg)
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
![Page 92: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/92.jpg)
touches
all touch points on screen
targetTouches
all touch points that started on the element
changedTouches
touch points that caused the event to fire
![Page 93: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/93.jpg)
patrickhlauke.github.io/touch/touchlist-objects
![Page 94: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/94.jpg)
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 );
![Page 96: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/96.jpg)
tracking finger movement overtime ... swipe gestures
![Page 99: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/99.jpg)
don't forget mouse/keyboard!
![Page 101: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/101.jpg)
touchmove fires...a lot!
![Page 102: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/102.jpg)
do absolute minimum on eachtouchmove
(usually: store coordinates)
![Page 103: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/103.jpg)
heavy JavaScript onsetInterval or
requestAnimationFrame
![Page 105: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/105.jpg)
why stop at a single point?multitouch support
![Page 106: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/106.jpg)
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
![Page 107: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/107.jpg)
/* iterate over touch array */
for (i=0; i< e.targetTouches .length; i++) { ... posX = e.targetTouches[i].clientX ; posY = e.targetTouches[i].clientY ; ...}
![Page 108: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/108.jpg)
patrickhlauke.github.io/touch/tracker/multi-touch-tracker.html
![Page 109: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/109.jpg)
iOS/iPad preventDefault()can't override 4-finger
gestures
![Page 110: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/110.jpg)
iOS7/Safari preventDefault()can't override back/forward
swipe gestures
![Page 111: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/111.jpg)
multitouch gestures
![Page 112: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/112.jpg)
/* iOS/Safari/WebView has gesture events for size/rotation,not part of the W3C Touch Events spec. */
gesturestart / gesturechange / gestureend
function(e) { /* e.scale e.rotation */}
/* not supported in Chrome/Firefox/Opera */
![Page 113: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/113.jpg)
/* with some trigonometry we can replicate these from basic principles. */
var distance = Math.sqrt(Math.pow(...)+Math.pow(...));var angle = Math.atan2(...);
![Page 114: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/114.jpg)
patrickhlauke.github.io/touch/picture-organiser
![Page 115: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/115.jpg)
not all old/cheap devices/OSssupport multitouch!
![Page 116: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/116.jpg)
HTC Hero – Android 2.1
![Page 117: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/117.jpg)
LG Optimus 2X – Android 2.3.7
![Page 118: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/118.jpg)
ZTE Open – Firefox OS 1.1
![Page 119: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/119.jpg)
what about Internet Explorer?
![Page 120: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/120.jpg)
up to IE9 (Win7 / WinPhone7.5)only mouse events
![Page 121: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/121.jpg)
in IE10 Microsoft introducedPointer Events
![Page 122: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/122.jpg)
David Rousset - Unifying touch and mouse [...]
![Page 123: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/123.jpg)
not just some“not invented here”
technology
![Page 125: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/125.jpg)
Pointer Events - W3C Editor's Draft 14 May 2014
![Page 126: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/126.jpg)
html5labs.interoperabilitybridges.com/prototypes/...
![Page 127: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/127.jpg)
Issue 162757: Implement pointer events in Chrome behind experimental flag
![Page 129: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/129.jpg)
...what about Apple?
![Page 130: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/130.jpg)
Bug 105463 - Implement pointer events RESOLVED WONTFIX
![Page 131: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/131.jpg)
patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html
![Page 132: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/132.jpg)
patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html
![Page 133: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/133.jpg)
events fired on tapmousemove* >
pointerover > mouseover >pointerenter > mouseenter >pointerdown > mousedown >pointermove > mousemove >
gotpointercapture >focus >
pointerup > mouseup >lostpointercapture >
pointerout > mouseout >pointerleave > mouseleave >
click
mouse events fired “inline” with pointer events(for a primary pointer, e.g. first finger on screen)
![Page 134: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/134.jpg)
vendor-prefixed in IE10MSPointerDown etc
navigator.msMaxTouchPoints-ms-touch-action
unprefixed in IE11 (but prefixed versions still mapped for compatibility)
![Page 135: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/135.jpg)
/* 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;}
/* plus all the classic MouseEvent attributes like clientX , clientY , etc */
![Page 136: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/136.jpg)
simple feature detection forpointer events
![Page 137: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/137.jpg)
/* detecting pointer events support */
if ( window.PointerEvent ) { /* some clever stuff here but this covers touch, stylus, mouse, etc */}
/* still listen to click for keyboard! */
![Page 138: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/138.jpg)
![Page 139: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/139.jpg)
/* detect maximum number of touch points */
if ( navigator.maxTouchPoints > 0 ) { /* device with a touchscreen */}
if ( navigator.maxTouchPoints > 1 ) { /* multitouch-capable device */}
![Page 140: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/140.jpg)
are pointer events better?
![Page 141: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/141.jpg)
no need for separate mouse ortouch event listeners
![Page 142: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/142.jpg)
/* touch events: separate handling */
foo.addEventListener('touchmove', ... , false);foo.addEventListener('mousemove', ... , false);
/* pointer events: single listener for mouse, stylus, touch */
foo.addEventListener(' pointermove ', ... , false);
![Page 143: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/143.jpg)
no need for separate mouse ortouch code to get x / y coords
![Page 144: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/144.jpg)
/* Pointer Events extend Mouse Events */
foo.addEventListener(' pointermove ', function(e) { ... posX = e.clientX ; posY = e.clientY ; ...}, false);
www.w3.org/TR/pointerevents/#pointerevent-interface
![Page 145: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/145.jpg)
but you can distinguish mouseor touch or stylus if needed
![Page 146: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/146.jpg)
foo.addEventListener('pointermove', function(e) { ... switch( e.pointerType ) { case ' mouse ': ... break; case ' pen ': ... break; case ' touch ': ... break; default : /* future-proof */ } ...} , false);
![Page 147: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/147.jpg)
pointer eventsvs
limitations/problems of mouseevent emulation
![Page 148: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/148.jpg)
1. delayed event dispatch2. mousemove doesn't track
![Page 149: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/149.jpg)
1. delayed event dispatch2. mousemove doesn't track
![Page 150: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/150.jpg)
patrickhlauke.github.io/touch/tests/event-listener_show-delay.html(IE/Win8 has double-tap to zoom, so problem on desktop too)
![Page 151: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/151.jpg)
patrickhlauke.github.io/touch/tests/event-listener.html
![Page 152: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/152.jpg)
patrickhlauke.github.io/touch/tests/event-listener.html
![Page 153: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/153.jpg)
pointer / mouse events and delaymousemove >
pointerover > mouseover >pointerenter > mouseenter >pointerdown > mousedown >pointermove > mousemove >
gotpointercapture >focus >
pointerup > mouseup >lostpointercapture >
pointerout > mouseout >pointerleave > mouseleave >
[300ms delay]click
![Page 154: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/154.jpg)
“how can we make it feelresponsive like a native app?”
![Page 155: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/155.jpg)
we could try a similarapproach to touch events...
![Page 156: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/156.jpg)
• double-up listeners - pointerup and click
• prevent code firing twice - preventDefault
preventDefault() on pointerdown stops mouse compatibilityevents, but click is not considered mouse compatibility event
![Page 157: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/157.jpg)
patrickhlauke.github.io/touch/tests/event-listener.html
![Page 158: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/158.jpg)
touch-action
![Page 159: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/159.jpg)
CSS propertytouch-action: auto | none | [ pan-x || pan-y ] | manipulation
www.w3.org/TR/pointerevents/#the-touch-action-css-propertyonly prevents default touch action (e.g. double-tap to zoom) does not
stop synthetic mouse events nor click
![Page 160: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/160.jpg)
touch-action:none killsscrolling, long-press,
pinch/zoom
![Page 161: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/161.jpg)
touch-action:manipulation
![Page 162: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/162.jpg)
patrickhlauke.github.io/touch/tests/event-listener_touch[...]
![Page 163: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/163.jpg)
Bug 979345 - Implement touch-action:manipulation [...]
![Page 164: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/164.jpg)
Issue 349016: Add support for touch-action:manipulation
chrome://flags/#enable-experimental-web-platform-features (Chrome 35)
![Page 165: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/165.jpg)
Bug 133114 - Implement " touch-action:manipulation " [...]
![Page 166: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/166.jpg)
1. delayed event dispatch2. mousemove doesn't track
![Page 168: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/168.jpg)
touch-action:none
![Page 170: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/170.jpg)
what about multitouch?
![Page 171: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/171.jpg)
/* PointerEvents don't have the handy TouchList objects, 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;}
![Page 172: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/172.jpg)
patrickhlauke.github.io/touch/tracker/multi-touch-tracker-pointer.html
(note multiple isPrimary pointers)
![Page 173: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/173.jpg)
/* like iOS/Safari, IE/Win has higher-level gestures , but these are not part of the W3C Pointer Events spec.
Replicate these from basic principles again... */
![Page 174: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/174.jpg)
/* advanced topic: pointer capture */
gotpointercapture / lostpointercapture
element.setPointerCapture(pointerId)
patrickhlauke.github.io/touch/tests/pointercapture.html
![Page 175: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/175.jpg)
what about backwards-compatibility?
![Page 176: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/176.jpg)
touchstart > [touchmove]+ > touchend >[300ms delay] >
mouseover > mousemove > mousedown > mouseup > click
vs
pointerover > mouseover > pointerdown > mousedown >pointermove > mousemove > pointerup > mouseup >pointerout > mouseout > [300ms delay] > click
![Page 178: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/178.jpg)
/* cover all cases (hat-tip Stu Cox) */
if ('onpointerdown' in window) {
/* bind to Pointer Events: pointerdown, pointerup, etc */
} else {
/* bind to mouse events: mousedown, mouseup, etc */
if ('ontouchstart' in window) { /* bind to Touch Events: touchstart, touchend, etc */ }}
/* bind to keyboard / click */
![Page 179: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/179.jpg)
polyfills for pointer events(code for tomorrow, today)
![Page 184: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/184.jpg)
/* Polymer's PointerEvents are not fired unless an element has a (custom) touch-action attribute */
<div id="foo" touch-action="none" ></div>
![Page 185: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/185.jpg)
utility libraries(because life is too short to hand-code gesture support)
![Page 187: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/187.jpg)
/* Hammer's high-level events example */
var element = document.getElementById('test_el');
var hammertime = Hammer(element).on("swipeleft swiperight", function(event) { /* handle horizontal swipes */});
![Page 188: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/188.jpg)
jQuery Mobile? Sencha Touch?check for support of IE10+
and “this is a touch device”
assumptions
![Page 189: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/189.jpg)
debugging/testing
![Page 190: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/190.jpg)
Chrome DevTools / Using the Console / Monitoring events
![Page 192: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/192.jpg)
beware inaccurate emulation
![Page 193: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/193.jpg)
Issue 181204: [...] event order different from real devicesFixed in Chrome (Canary) 37
![Page 194: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/194.jpg)
Bug 920956 - DevTools touch emulation: suppress regular mouse events ...
![Page 195: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/195.jpg)
beware inaccurateimplementation
![Page 196: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/196.jpg)
![Page 197: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/197.jpg)
Bug 861876 - [...] multiple mousemoves being fired
![Page 198: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/198.jpg)
Bug 861876 - [...] preventDefault on touchstart doesn't stop synthetic mouse events
![Page 199: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/199.jpg)
![Page 200: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/200.jpg)
further reading...
![Page 201: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/201.jpg)
• Matt Gaunt – Touch Feedback for Mobile Sites
• Jonathan Stark – FastActive
• Stephen Woods – HTML5 Touch Interfaces
• Chris Wilson + Paul Kinlan – Touch And Mouse: Together Again For
The First Time
• Ryan Fioravanti – Creating Fast Buttons for Mobile Web Applications
• Boris Smus – Multi-touch Web Development
• Boris Smus – Generalized input on the cross-device web
• Boris Smus – Interactive touch laptop experiments
![Page 202: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/202.jpg)
• Rick Byers + Boris Smus (Google I/O) – Point, Click, Tap, Touch -
Building Multi-Device Web Interfaces
• Grant Goodale – Touch Events
• W3C – Touch Events Extensions
• Mozilla Developer Network – Touch Events
• WebPlatform.org – Pointer Events
• Rick Byers – The best way to avoid the dreaded 300ms click delay is
to disable double-tap zoom
• Chromium Issue 152149: All touch-event related APIs should exist if
touch support is enabled at runtime
![Page 203: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/203.jpg)
• Tim Kadlec – Avoiding the 300ms Click Delay, Accessibly
• Microsoft – Pointer events updates (differences between IE10-IE11)
• Patrick H. Lauke – Webseiten zum Anfassen
• Patrick H. Lauke – Drei unter einem Dach: Pointer-Events für Maus,
Stylus und Touchscreen
• Patrick H. Lauke – Make your site work on touch devices
• Stu Cox – You can't detect a touchscreen
• Tilo Mitra – The State of Gestures
• Microsoft – Hover touch support (IE10/IE11)
• W3C Media Queries Level 4 – pointer
![Page 204: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/204.jpg)
• Stu Cox – The Good & Bad of Level 4 Media Queries
• Peter-Paul Koch – Touch table
• Peter-Paul Koch – Preventing the touch default
• Peter-Paul Koch – Mouse event bubbling in iOS
• Edge Conference (Feb 2013 London) – Panel: Input
• Edge Conference (Mar 2014 London) – Panel: Pointers and Interactions
• Trent Walton – Device-Agnostic
• Stu Cox – The Golden Pattern for Handling Touch Input
• Matt Gaunt – ‘Focusing’ on the Web Today
• Mobiscroll – Working with touch events
![Page 206: Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events](https://reader036.vdocument.in/reader036/viewer/2022062703/5552a2fdb4c905e8128b53a2/html5/thumbnails/206.jpg)
get in touch@patrick_h_lauke
github.com/patrickhlauke/touchpatrickhlauke.github.io/getting-touchy-presentation
slideshare.net/reduxpaciellogroup.com
splintered.co.uk