Getting touchy - an introduction to touch events / Sainté Mobile Days / Saint-Etienne 22.11.2013
0 likes5,479 views
This document discusses touch events for responsive web design. It begins by explaining how browsers emulate mouse events on touch devices, which can cause problems like delayed responses. Native touch events are introduced as a better solution, covering events like touchstart, touchmove, and touchend. The document explores issues like touch versus mouse/keyboard, multi-touch support, and touch event support across browsers. It provides examples of how to track finger movement and implement swipe gestures using touch events.
![touchstart > [touchmove]+ > touchend >
mouseover > mousemove > mousedown >
(focus) > mouseup > click](https://image.slidesharecdn.com/saintemobile22-131121101016-phpapp01/85/Getting-touchy-an-introduction-to-touch-events-Sainte-Mobile-Days-Saint-Etienne-22-11-2013-20-320.jpg)
![[...] no more 300ms click delay, or double-tap zoom, on mobile websites](https://image.slidesharecdn.com/saintemobile22-131121101016-phpapp01/85/Getting-touchy-an-introduction-to-touch-events-Sainte-Mobile-Days-Saint-Etienne-22-11-2013-54-320.jpg)
![touchstart > [touchmove]+ > touchend >
mouseover > mousemove* > mousedown >
(focus) > mouseup > click
*mouse event emulation fires only a single mousemove](https://image.slidesharecdn.com/saintemobile22-131121101016-phpapp01/85/Getting-touchy-an-introduction-to-touch-events-Sainte-Mobile-Days-Saint-Etienne-22-11-2013-60-320.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 );](https://image.slidesharecdn.com/saintemobile22-131121101016-phpapp01/85/Getting-touchy-an-introduction-to-touch-events-Sainte-Mobile-Days-Saint-Etienne-22-11-2013-67-320.jpg)
![for (i=0; i<e.targetTouches.length; i++) {
...
posX = e.targetTouches[i].clientX;
posY = e.targetTouches[i].clientY;
...
}](https://image.slidesharecdn.com/saintemobile22-131121101016-phpapp01/85/Getting-touchy-an-introduction-to-touch-events-Sainte-Mobile-Days-Saint-Etienne-22-11-2013-80-320.jpg)
Getting touchy - an introduction to touch events / Sainté Mobile Days / Saint-Etienne 22.11.2013
- 1. getting touchy AN INTRODUCTION TO TOUCH EVENTS Patrick H. Lauke / Sainté Mobile Days / Saint-Etienne / 22 November 2013
- 2. “how can I make my website work on touch devices?”
- 3. you don't need touch events browsers emulate regular mouse events
- 6. mouseover > mousemove* > mousedown > (focus) > mouseup > click *only a single “sacrificial” event is fired
- 7. emulation works, but is limiting/problematic
- 8. 1. delayed event dispatch 2. mousemove doesn't track there are more (e.g. no concept of hover on touchscreens)
- 9. 1. delayed event dispatch 2. mousemove doesn't track
- 12. 1. delayed event dispatch 2. mousemove doesn't track
- 14. patrickhlauke.github.io/touch/particle/2 (bug in iOS7: moving finger does seem to scroll and fire multiple mousemove events?!)
- 15. “we need to go deeper...”
- 16. touch events introduced in iOS 2.0, adopted in Chrome/Firefox/Opera www.w3.org/TR/touch-events
- 20. touchstart > [touchmove]+ > touchend > mouseover > mousemove > mousedown > (focus) > mouseup > click
- 21. 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
- 23. 1. delayed event dispatch 2. mousemove doesn't track
- 24. 1. delayed event dispatch 2. mousemove doesn't track
- 27. “how can we make it feel responsive like a native app?”
- 28. react to events fired before the 300ms delay...
- 29. interlude: simple feature detection for touch events
- 30. if ('ontouchstart' in window) { /* some clever stuff here */ }
- 31. /* common performance “trick” */ var clickEvent = ('ontouchstart' in window ? 'touchend' : 'click'); blah.addEventListener(clickEvent, function() { ... }, false);
- 32. don't make it touch-exclusive
- 33. if ('ontouchstart' in window) { /* browser supports touch events but user is not necessarily using touch (exclusively) */ }
- 34. hybrid devices touch + mouse + keyboard
- 37. Android + mouse – behaves like touch touchstart > touchend > mouseover > mousemove > mousedown > mouseup > click
- 38. Android + keyboard – like desktop keyboard focus > click
- 39. VoiceOver enables keyboard access on iOS
- 40. iOS + keyboard – similar to touch focus > touchstart > touchend > mouseover > mousemove > mousedown blur > mouseup > click
- 41. iOS + VoiceOver – similar to touch focus > touchstart > touchend > mouseover > mousemove > mousedown blur > mouseup > click
- 42. Android + TalkBack – keyboard/mouse hybrid focus > blur > mousedown > mouseup > click > focus(?)
- 43. touch or mouse or keyboard
- 44. touch and mouse and keyboard
- 45. /* doubled-up event listeners */ foo.addEventListener('touchend', someFunction, false); foo.addEventListener('click', someFunction, false);
- 46. /* 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);
- 49. browsers working to remove delay when possible
- 54. [...] no more 300ms click delay, or double-tap zoom, on mobile websites
- 56. iOS/Safari designed themselves into a corner with “double-tap to scroll” bugs.webkit.org/show_bug.cgi?id=122212
- 57. 1. delayed event dispatch 2. mousemove doesn't track
- 59. patrickhlauke.github.io/touch/particle/2 (bug in iOS7: moving finger does seem to scroll and fire multiple mousemove events?!)
- 60. touchstart > [touchmove]+ > touchend > mouseover > mousemove* > mousedown > (focus) > mouseup > click *mouse event emulation fires only a single mousemove
- 61. doubling up handling of mousemove and touchmove
- 62. var posX, posY; ... function positionHandler(e) { posX = e.clientX; posY = e.clientY; } ... canvas.addEventListener('mousemove', positionHandler, false);
- 63. var posX, posY; ... function positionHandler(e) { /* handle both mouse and touch? */ } ... canvas.addEventListener('mousemove', positionHandler, false); canvas.addEventListener('touchmove', positionHandler, false);
- 64. 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
- 65. 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
- 66. interface Touch { readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute }; long EventTarget long long long long long long identifier; target; screenX; screenY; clientX; clientY; pageX; pageY; www.w3.org/TR/touch-events/#touch-interface
- 67. 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 );
- 69. tracking finger movement over time ... swipe gestures
- 75. do absolute minimum on each touchmove (usually: store new coordinates)
- 78. why stop at a single point? multitouch support
- 79. 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
- 80. for (i=0; i<e.targetTouches.length; i++) { ... posX = e.targetTouches[i].clientX; posY = e.targetTouches[i].clientY; ... }
- 82. iOS/iPad even preventDefault() can't override 4-finger gestures
- 83. iOS7/Safari even preventDefault() can't override back/forward swipe gestures
- 84. /* iOS/Safari has gesture events for size/rotation not supported in Chrome/Firefox, not part of the W3C Touch Events specification. With some trigonometry we can replicate these from basic principles. */ var distance = Math.sqrt(Math.pow(...)+Math.pow(...)); var angle = Math.atan2(...);
- 86. touch events and Internet Explorer...
- 89. not just some “not invented here” new approach for IE10+
- 90. active development by Mozilla and Chrome teams ...Apple?
- 91. but that's probably enough for now...
- 92. pour en savoir plus: rendez-vous à l'atelier demain matin @patrick_h_lauke github.com/patrickhlauke/touch slideshare.net/redux paciellogroup.com splintered.co.uk