getting touchy - an introduction to touch and pointer events / sainté mobile days / saint-etienne...
DESCRIPTION
TRANSCRIPT
![Page 1: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/1.jpg)
getting touchy AN INTRODUCTION TO TOUCH AND POINTER EVENTS
Patrick H. Lauke / Sainté Mobile Days / Saint-Etienne / 23 November 2013
![Page 2: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/2.jpg)
1. introduction
2. touch events
3. break
4. pointer events
5. debugging/testing
6. conclusion
![Page 4: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/4.jpg)
“how can I make my website work on touch devices?”
![Page 5: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/5.jpg)
you don't need touch eventsbrowsers emulate regular mouse events
![Page 6: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/6.jpg)
patrickhlauke.github.io/touch/tests/event-listener_mouse-only.html
![Page 7: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/7.jpg)
patrickhlauke.github.io/touch/tests/event-listener_mouse-only.html
![Page 8: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/8.jpg)
mouseover > mousemove* > mousedown > (focus) > mouseup > click
*only a single “sacrificial” event is fired
![Page 9: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/9.jpg)
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)
![Page 10: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/10.jpg)
emulation works,but is limiting/problematic
![Page 11: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/11.jpg)
1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesn't track
![Page 12: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/12.jpg)
1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesn't track
![Page 13: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/13.jpg)
patrickhlauke.github.io/touch/tests/event-listener_show-delay.html
![Page 14: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/14.jpg)
patrickhlauke.github.io/touch/tests/event-listener_show-delay.html
![Page 15: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/15.jpg)
1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesn't track
![Page 16: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/16.jpg)
steamcommunity.com/id/redux_splintered/screenshots/?appid=8870
![Page 18: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/18.jpg)
patrickhlauke.github.io/touch/css-dropdown/mouse-only.html
![Page 19: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/19.jpg)
1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesn't track
![Page 21: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/21.jpg)
patrickhlauke.github.io/touch/particle/2(bug in iOS7: moving finger does seem to scroll and fire multiple mousemove events?!)
![Page 22: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/22.jpg)
“we need to go deeper...”
![Page 23: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/23.jpg)
touch eventsintroduced in iOS 2.0, adopted in Chrome/Firefox/Opera
www.w3.org/TR/touch-events
![Page 24: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/24.jpg)
touchstarttouchmove
touchend
touchcanceltouchentertouchleave
![Page 25: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/25.jpg)
patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html
![Page 26: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/26.jpg)
patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html
![Page 27: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/27.jpg)
touchstart > [touchmove]+ > touchend > mouseover > mousemove > mousedown >
(focus) > mouseup > click
![Page 28: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/28.jpg)
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...
![Page 29: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/29.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 30: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/30.jpg)
touch eventsvs
limitations/problems
![Page 31: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/31.jpg)
1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesn't track
![Page 32: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/32.jpg)
1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesn't track
![Page 33: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/33.jpg)
patrickhlauke.github.io/touch/tests/event-listener_show-delay.html
![Page 34: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/34.jpg)
patrickhlauke.github.io/touch/tests/event-listener_show-delay.html
![Page 35: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/35.jpg)
why the delay?double-tap to zoom
(mostly anyway)
![Page 36: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/36.jpg)
what if browsers didn't wait?
![Page 37: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/37.jpg)
Puffin/Android (popular in Korea?) puffinbrowser.comdouble-tap zooms and fires mouse events + click
(also, doesn't support touch events at all)
![Page 38: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/38.jpg)
UCWeb/Android (popular in China?) ucweb.comno delay...but only because it doesn't implement double-tap to zoom
![Page 39: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/39.jpg)
when does the delay happen?
![Page 40: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/40.jpg)
patrickhlauke.github.io/touch/tests/event-listener.html
![Page 41: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/41.jpg)
patrickhlauke.github.io/touch/tests/event-listener.html
![Page 42: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/42.jpg)
“how can we make it feel responsive like a native app?”
![Page 43: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/43.jpg)
react to events fired before the 300ms delay...
![Page 44: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/44.jpg)
interlude:simple feature detection for
touch events
![Page 45: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/45.jpg)
if ('ontouchstart' in window) {
/* some clever stuff here */
}
![Page 46: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/46.jpg)
/* common performance “trick” */
var clickEvent = ('ontouchstart' in window ? 'touchend' : 'click');
blah.addEventListener(clickEvent,function() { ... }, false);
![Page 47: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/47.jpg)
don't make it touch-exclusive
![Page 48: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/48.jpg)
hacks.mozilla.org/2013/04/detecting-touch...
![Page 49: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/49.jpg)
if ('ontouchstart' in window) {
/* browser supports touch events but user is not necessarily using touch (exclusively) */
}
![Page 50: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/50.jpg)
hybrid devicestouch + mouse + keyboard
![Page 51: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/51.jpg)
patrickhlauke.github.io/touch/tests/event-listener_show-delay-naive-event-fix.html
![Page 53: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/53.jpg)
![Page 54: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/54.jpg)
![Page 55: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/55.jpg)
Android + mouse – behaves like touchtouchstart > touchend > mouseover > mousemove > mousedown > mouseup > click
![Page 56: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/56.jpg)
Blackberry PlayBook 2.0 + mouse – like desktop mousemouseover > mousedown > mousemove > mouseup > click
![Page 57: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/57.jpg)
Android + keyboard – like desktop keyboardfocus > click
![Page 58: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/58.jpg)
VoiceOver enables keyboard access on iOS
![Page 59: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/59.jpg)
iOS + keyboard – similar to touchfocus > touchstart > touchend > mouseover > mousemove > mousedown
blur > mouseup > click
![Page 60: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/60.jpg)
iOS + VoiceOver – similar to touchfocus > touchstart > touchend > mouseover > mousemove > mousedown
blur > mouseup > click
![Page 61: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/61.jpg)
Android + TalkBack – keyboard/mouse hybridfocus > blur > mousedown > mouseup > click > focus(?)
![Page 62: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/62.jpg)
touch or mouse or keyboard
![Page 63: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/63.jpg)
touch and mouse and keyboard
![Page 64: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/64.jpg)
/* doubled-up event listeners */
foo.addEventListener('touchend', someFunction, false);
foo.addEventListener('click', someFunction, false);
![Page 65: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/65.jpg)
/* 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);
![Page 67: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/67.jpg)
preventDefaultkills scrolling, long-press,
pinch/zoom
![Page 68: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/68.jpg)
![Page 69: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/69.jpg)
browsers working to remove delay when possible
![Page 70: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/70.jpg)
patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html
![Page 71: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/71.jpg)
patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html
![Page 72: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/72.jpg)
patrickhlauke.github.io/touch/tests/event-listener_minimum-maximum-scale.html
![Page 73: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/73.jpg)
![Page 74: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/74.jpg)
patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html
![Page 75: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/75.jpg)
patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html
![Page 76: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/76.jpg)
patrickhlauke.github.io/touch/tests/event-listener_minimum-maximum-scale.html
![Page 77: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/77.jpg)
patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html
![Page 78: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/78.jpg)
patrickhlauke.github.io/touch/tests/event-listener_minimum-maximum-scale.html
![Page 79: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/79.jpg)
Bug 922896 - Optimizations to remove 300ms touch > mouse events delay[RESOLVED - FIXED]
![Page 80: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/80.jpg)
Issue 169642: Remove ~300ms delay on tap for mobile sites [...]
![Page 81: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/81.jpg)
[...] no more 300ms click delay, or double-tap zoom, on mobile websites
![Page 82: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/82.jpg)
patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html
![Page 83: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/83.jpg)
iOS/Safari designed themselves into a cornerwith “double-tap to scroll”
bugs.webkit.org/show_bug.cgi?id=122212
![Page 84: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/84.jpg)
1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesn't track
![Page 85: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/85.jpg)
steamcommunity.com/id/redux_splintered/screenshots/?appid=8870
![Page 87: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/87.jpg)
patrickhlauke.github.io/touch/css-dropdown/mouse-only.html
![Page 88: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/88.jpg)
no isolated hover (or focus) on touch devices*
* iOS fakes it, Samsung Galaxy S4 + stylus, ...
![Page 89: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/89.jpg)
patrickhlauke.github.io/touch/css-dropdown/mouse-only.html
![Page 90: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/90.jpg)
patrickhlauke.github.io/touch/css-dropdown/mouse-only.html
![Page 91: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/91.jpg)
http://developer.apple.com/library/IOS/...
![Page 93: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/93.jpg)
www.stucox.com/blog/you-cant-detect-a-touchscreen
![Page 94: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/94.jpg)
avoid hover-based interfaces?
complement for keyboard / touch!
![Page 95: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/95.jpg)
patrickhlauke.github.io/touch/css-dropdown/mouse-keyboard.html
![Page 96: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/96.jpg)
patrickhlauke.github.io/touch/css-dropdown/mouse-keyboard.html
![Page 97: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/97.jpg)
patrickhlauke.github.io/touch/css-dropdown/mouse-keyboard-touch.html
![Page 98: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/98.jpg)
1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesn't track
![Page 100: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/100.jpg)
patrickhlauke.github.io/touch/particle/2(bug in iOS7: moving finger does seem to scroll and fire multiple mousemove events?!)
![Page 101: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/101.jpg)
touchstart > [touchmove]+ > touchend > mouseover > mousemove* > mousedown >
(focus) > mouseup > click
*mouse event emulation fires only a single mousemove
![Page 102: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/102.jpg)
doubling up handling of mousemove and touchmove
![Page 103: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/103.jpg)
var posX, posY;
...
function positionHandler(e) {posX = e.clientX;posY = e.clientY;
}
...
canvas.addEventListener('mousemove', positionHandler, false);
![Page 104: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/104.jpg)
var posX, posY;
...
function positionHandler(e) {/* handle both mouse and touch? */
}
...
canvas.addEventListener('mousemove',positionHandler, false);
canvas.addEventListener('touchmove',positionHandler, false);
![Page 105: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/105.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 106: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/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: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/107.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 108: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/108.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 111: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/111.jpg)
www.splintered.co.uk/experiments/archives/paranoid_0.5
![Page 112: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/112.jpg)
tracking finger movementover time ... swipe gestures
![Page 116: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/116.jpg)
don't forget mouse/keyboard !
![Page 118: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/118.jpg)
touchmove fires...a lot!
![Page 119: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/119.jpg)
do absolute minimum on each touchmove
(usually: store new coordinates)
![Page 120: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/120.jpg)
heavy JavaScript on requestAnimationFrame
setInterval
![Page 122: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/122.jpg)
why stop at a single point?multitouch support
![Page 123: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/123.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 124: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/124.jpg)
for (i=0; i<e.targetTouches.length; i++) {
...
posX = e.targetTouches[i].clientX;posY = e.targetTouches[i].clientY;
...
}
![Page 125: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/125.jpg)
patrickhlauke.github.io/touch/tracker/multi-touch-tracker.html
![Page 126: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/126.jpg)
iOS/iPad even preventDefault()can't override 4-finger gestures
![Page 127: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/127.jpg)
iOS7/Safari even preventDefault()can't override back/forward swipe gestures
![Page 128: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/128.jpg)
multitouch gestures
![Page 129: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/129.jpg)
/* iOS/Safari has gesture events for size/rotation, not supported in Chrome/Firefox/Opera, not part of the W3C Touch Events spec. */
gesturestart, gesturechange, gestureend
e.scale, e.rotation
![Page 131: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/131.jpg)
patrickhlauke.github.io/touch/iosgestures/image.html
![Page 132: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/132.jpg)
/* with some trigonometry we can replicate these from basic principles. */
var distance = Math.sqrt(Math.pow(...)+Math.pow(...));var angle = Math.atan2(...);
![Page 133: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/133.jpg)
patrickhlauke.github.io/touch/pinch-zoom-rotate
![Page 135: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/135.jpg)
interlude:older devices/OS versions
and multitouch...
![Page 136: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/136.jpg)
HTC Hero – Android 2.1
![Page 137: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/137.jpg)
LG Optimus 2X – Android 2.3.7
![Page 138: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/138.jpg)
touch events andInternet Explorer...
![Page 139: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/139.jpg)
blogs.msdn.com/...
![Page 141: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/141.jpg)
not just some “not invented here” new approach for IE10+
![Page 142: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/142.jpg)
html5labs.interoperabilitybridges.com/prototypes/...
![Page 143: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/143.jpg)
code.google.com/p/chromium/issues/detail?id=162757
![Page 145: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/145.jpg)
...what about Apple?
![Page 146: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/146.jpg)
bugs.webkit.org/show_bug.cgi?id=105463(no real activity since April 2013?)
![Page 147: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/147.jpg)
patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html
![Page 148: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/148.jpg)
patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html
![Page 149: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/149.jpg)
pointerover > mouseover >pointerenter > mouseenter > pointerdown > mousedown > pointermove > mousemove >
focus > pointerup > mouseup > pointerout > mouseout >
pointerleave > mouseleave > click
mouse events fired “inline” with pointer events(for the primary contact, e.g. first finger on screen)
![Page 150: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/150.jpg)
gotpointercapture
lostpointercapture
![Page 151: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/151.jpg)
vendor-prefixed in IE10MSPointerDownMSPointerMoveMSPointerUp
navigator.msPointerEnablednavigator.msMaxTouchPoints
-ms-touch-action
unprefixed in IE11
![Page 152: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/152.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 153: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/153.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;
};
www.w3.org/TR/pointerevents/#pointerevent-interface
![Page 154: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/154.jpg)
simple feature detection for pointer events
![Page 155: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/155.jpg)
if (navigator.pointerEnabled) {
/* some clever stuff here but this covers touch, stylus, mouse, etc */
}
/* still listen to click for keyboard! */
![Page 156: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/156.jpg)
if (navigator.maxTouchPoints > 1) {
/* multitouch-capable device */
}
![Page 157: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/157.jpg)
patrickhlauke.github.io/touch/tests/pointer-multitouch-detect.html
![Page 158: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/158.jpg)
pointer eventsvs
limitations/problemsof mouse event emulation
![Page 159: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/159.jpg)
1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesn't track
![Page 160: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/160.jpg)
1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesn't track
![Page 161: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/161.jpg)
patrickhlauke.github.io/touch/tests/event-listener_show-delay.html
![Page 162: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/162.jpg)
patrickhlauke.github.io/touch/tests/event-listener_show-delay.html
![Page 163: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/163.jpg)
patrickhlauke.github.io/touch/tests/event-listener.html
![Page 164: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/164.jpg)
patrickhlauke.github.io/touch/tests/event-listener.html
![Page 165: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/165.jpg)
patrickhlauke.github.io/touch/tests/event-listener.html
![Page 166: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/166.jpg)
“how can we make it feel responsive like a native app?”
![Page 167: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/167.jpg)
preventDefault() won't work(but you can prevent most mouse compatibility events by
cancelling pointerdown)
![Page 168: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/168.jpg)
touch-action: auto|none|[pan-x][pan-y]
www.w3.org/TR/pointerevents/#the-touch-action-css-property
only prevents default touch action (e.g. double-tap to zoom)does not stop synthetic mouse events nor click
![Page 169: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/169.jpg)
touch-action:nonekills scrolling, long-press,
pinch/zoom
![Page 170: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/170.jpg)
touch-action:none
![Page 171: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/171.jpg)
http://patrickhlauke.github.io/touch/tests/event-listener_touch-action-none.html
![Page 172: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/172.jpg)
http://patrickhlauke.github.io/touch/tests/event-listener_touch-action-none.html
![Page 173: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/173.jpg)
pointerover > mouseover >pointerenter > mouseenter > pointerdown > mousedown > pointermove > mousemove >
focus > pointerup > mouseup >
click > pointerout > mouseout >pointerleave > mouseleave
![Page 174: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/174.jpg)
1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesn't track
![Page 175: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/175.jpg)
msdn.microsoft.com/en-us/library/ie/dn265029(v=vs.85).aspx
![Page 176: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/176.jpg)
msdn.microsoft.com/en-us/library/ie/jj152135(v=vs.85).aspx
![Page 177: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/177.jpg)
patrickhlauke.github.io/touch/css-dropdown/mouse-only-aria-haspopup.html
![Page 178: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/178.jpg)
channel9.msdn.com/Blogs/IE/IE11-Using-Hover-Menus-with-Touch
![Page 179: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/179.jpg)
1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesn't track
![Page 181: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/181.jpg)
touch-action:none
![Page 183: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/183.jpg)
what about
multitouch?
![Page 184: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/184.jpg)
patrickhlauke.github.io/touch/tracker/mouse-tracker_touch-action-none.html
![Page 185: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/185.jpg)
/* PointerEvents don't have the handy touch arrays, so we have to replicate something similar... */
![Page 186: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/186.jpg)
/* PointerEvents don't have the handy touch arrays, 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 187: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/187.jpg)
patrickhlauke.github.io/touch/tracker/multi-touch-tracker-pointer.html
![Page 188: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/188.jpg)
/* 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? */
![Page 190: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/190.jpg)
pointer events as the future?
![Page 191: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/191.jpg)
what about backwards-compatibility?
![Page 192: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/192.jpg)
touchstart > [touchmove]+ > touchend >[300ms delay] > mouseover > mousemove >
mousedown > mouseup > click
+pointerover > mouseover > pointerdown >
mousedown > pointermove > mousemove > pointerup > mouseup > pointerout > mouseout >
[300ms delay] > click
![Page 194: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/194.jpg)
polyfills for pointer events(code for tomorrow, today)
![Page 199: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/199.jpg)
utility libraries(because life is too short to hand-code gesture support etc)
![Page 201: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/201.jpg)
jQuery Mobile? Sencha Touch? …check for support of IE10+ and “this is a touch device” assumptions
![Page 202: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/202.jpg)
debugging/testing
![Page 203: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/203.jpg)
Issue 181204: Emulate touch events - event order different from real devices
![Page 204: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/204.jpg)
Bug 920956 - DevTools touch emulation: suppress regular mouse events ...
![Page 205: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/205.jpg)
developers.google.com/chrome-developer-tools/docs/console#monitoring_events
![Page 206: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/206.jpg)
Bug 861876 - [...] multiple mousemoves being fired
![Page 207: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/207.jpg)
![Page 208: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/208.jpg)
further reading...
![Page 209: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/209.jpg)
Matt Gaunt – Touch Feedback for Mobile Siteswww.gauntface.co.uk/blog/2013/06/25/touch-feedback-for-mobile-sites
Jonathan Stark – FastActivegithub.com/jonathanstark/FastActive
Stephen Woods – HTML5 Touch Interfaceswww.slideshare.net/ysaw/html5-touch-interfaces-sxsw-extended-version
David Rousset – Unifying touch and mouse: how Pointer Events will make cross-browsers touch support easyblogs.msdn.com/b/davrous/archive/2013/02/20/handling-touch[...]
Chris Wilson + Paul Kinlan – Touch And Mouse: Together Again For The First Timewww.html5rocks.com/en/mobile/touchandmouse
Patrick H. Lauke – Webseiten zum Anfassenwebkrauts.de/artikel/2012/einfuehrung-touch-events
Ryan Fioravanti – Creating Fast Buttons for Mobile Web Applicationsdevelopers.google.com/mobile/articles/fast_buttons
Boris Smus – Multi-touch Web Developmentwww.html5rocks.com/en/mobile/touch
Boris Smus – Generalized input on the cross-device websmus.com/mouse-touch-pointer
![Page 210: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/210.jpg)
Rick Byers + Boris Smus (Google I/O) – Point, Click, Tap, Touch - Building Multi-Device Web Interfacesdevelopers.google.com/events/io/sessions/361772634
Grant Goodale – Touch Eventswww.w3.org/conf/2011/#Touch_Events
W3C – Touch Events Extensionswww.w3.org/TR/2013/NOTE-touch-events-extensions-20131031
Mozilla Developer Network – Touch Eventsdeveloper.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/Touch_events
WebPlatform.org – Pointer Eventsdocs.webplatform.org/wiki/concepts/Pointer_Events
Rick Byers – The best way to avoid the dreaded 300ms click delay is to disable double-tap zoomplus.google.com/+RickByers/posts/ej7nsuoaaDa
Tim Kadlec – Avoiding the 300ms Click Delay, Accessiblytimkadlec.com/2013/11/Avoiding-the-300ms-click-delay-accessibly
Microsoft – Pointer events updates (differences between IE10 and IE11)msdn.microsoft.com/en-us/library/ie/dn304886(v=vs.85).aspx
![Page 212: Getting touchy - an introduction to touch and pointer events / Sainté Mobile Days / Saint-Etienne 23.11.2013](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7796f4a79590c788b4574/html5/thumbnails/212.jpg)
merci@patrick_h_lauke
github.com/patrickhlauke/touchslideshare.net/redux
paciellogroup.comsplintered.co.uk