Getting touchy - an introduction to touch events / Sud Web / Avignon 17.05.2013
•
14 likes•30,841 views
This document discusses touch events and how browsers emulate mouse events on touch devices. It notes that mouse event emulation has limitations like delayed dispatching and lack of touch-specific interfaces. True touch events like touchstart and touchmove are introduced to address these issues. The document also covers more advanced topics like multitouch support, gestures, and differences between touch event implementations on various browsers and platforms.
Report
Share
Getting touchy - an introduction to touch events / Sud Web / Avignon 17.05.2013
- 1. getting touchy AN INTRODUCTION TO TOUCH EVENTS Patrick H. Lauke / Sud Web / Avignon / 17 May 2013
- 2. how can I make my website work on touch devices?
- 3. you don't need touch events browsers emulate regular mouse events
- 5. mouseover > mousemove* > mousedown > (focus) > mouseup > click *only a single “sacrificial” events is fired
- 6. on first tap mouseover > mousemove > mousedown > (focus) > mouseup > click subsequent taps mousemove > mousedown > (focus) > mouseup > click tapping away mouseout > (blur) focus/blur only on focusable elements in Opera Mobile and Firefox mouseout not on iOS Safari and embedded WebView (e.g. iOS Chrome)
- 7. emulation works but is limiting/problematic (more on that in a minute)
- 8. “we need to go deeper...”
- 9. touch events introduced in iOS, adopted in Chrome/Firefox/Opera www.w3.org/TR/touch-events
- 12. touchstart > [touchmove]+ > touchend > mouseover > mousemove > mousedown > (focus) > mouseup > click
- 13. on first tap touchstart > [touchmove]+ > touchend > mouseover > mousemove > mousedown > (focus) > mouseup > click subsequent taps touchstart > [touchmove]+ > touchend > mousemove > mousedown > (focus) > mouseup > click tapping away mouseout > (blur) too many touchmove events abort the tap (after touchend) not all browsers consistently send the touchmove some browsers outright weird...
- 14. Browser/Android 4.2.2 (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
- 15. limitations/problems of mouse event emulation
- 17. 1. delayed event dispatch 2. mouse-specific interfaces 3. mousemove doesn't track
- 18. 1. delayed event dispatch 2. mouse-specific interfaces 3. mousemove doesn't track
- 21. “how can we make it feel responsive like a native app?”
- 22. simple feature detection for touch events
- 23. if ('ontouchstart' in window) { /* some clever stuff here */ }
- 24. /* common performance “trick” */ var clickEvent = ('ontouchstart' in window ? 'touchend' : 'click'); blah.addEventListener(clickEvent, function() { ... }, false);
- 25. don't make it touch-exclusive
- 28. if ('ontouchstart' in window) { /* browser supports touch events but user is not necessarily using touch (exclusively) */ }
- 29. hybrid devices touch + mouse + keyboard
- 31. Android + mouse – behaves like touch touchstart > touchend > mouseover > mousemove > mousedown > mouseup > click
- 32. Blackberry PlayBook 2.0 + mouse – like desktop mouse mouseover > mousedown > mousemove > mouseup > click
- 33. Android + keyboard – like desktop keyboard focus > click
- 34. VoiceOver enables keyboard access on iOS
- 35. iOS + keyboard – similar to touch focus > touchstart > touchend > mouseover > mousemove > mousedown blur > mouseup > click
- 36. mouse or touch vs mouse and touch
- 37. /* doubled-up event listeners */ foo.addEventListener('touchstart', someFunction, false); foo.addEventListener('click', someFunction, false);
- 38. /* doubled-up event listeners */ foo.addEventListener('touchstart', function(e) { /* prevent delay + mouse events */ e.preventDefault(); someFunction(); /* or even e.target.click(); */ }, false); foo.addEventListener('click', someFunction, false);
- 42. 1. delayed event dispatch 2. mouse-specific interfaces 3. mousemove doesn't track
- 46. no isolated hover (or focus) on touch devices* * iOS fakes it, Samsung Galaxy S4 + stylus, ...
- 48. avoid hover-based interfaces? complement for keyboard / touch!
- 49. Modernizr issue 869: Detecting a mouse user
- 50. 1. delayed event dispatch 2. mouse-specific interfaces 3. mousemove doesn't track
- 52. touchstart > [touchmove]+ > touchend > mouseover > mousemove* > mousedown > (focus) > mouseup > click *mouse event emulation fires only a single mousemove
- 53. doubling up handling of mousemove and touchmove
- 54. var posX, posY; ... function positionHandler(e) { posX = e.clientX; posY = e.clientY; } ... canvas.addEventListener('mousemove', positionHandler, false);
- 55. var posX, posY; ... function positionHandler(e) { /* handle both mouse and touch? */ } ... canvas.addEventListener('mousemove', positionHandler, false); canvas.addEventListener('touchmove', positionHandler, false);
- 56. 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
- 57. 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
- 58. 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
- 59. 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 );
- 62. tracking finger movement => swipe gestures
- 69. why stop at a single point? multitouch support
- 70. 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
- 71. for (i=0; i<e.targetTouches.length; i++) { ... posX = e.targetTouches[i].clientX; posY = e.targetTouches[i].clientY; ... }
- 73. iOS/iPad even preventDefault() can't override 4-finger gestures
- 75. /* iOS/Safari has gesture events for size/rotation, not supported in Chrome/Firefox/Opera, not part of the W3C Touch Events spec. With some trigonometry we can replicate these from basic principles. */ var distance = Math.sqrt(Math.pow(...)+Math.pow(...)); var angle = Math.atan2(...);
- 79. touch events and IE10
- 82. pointerover > mouseover > pointerdown > mousedown > pointermove > mousemove > (focus) > pointerup > mouseup > pointerout > mouseout > click mouse events fired “inline” with pointer events!
- 83. 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
- 84. /* 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
- 85. preventDefault() won't work touch-action: auto|none|[pan-x][pan-y] www.w3.org/TR/pointerevents/#the-touch-action-css-property
- 89. /* 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? */
- 92. Issue 181204: Emulate touch events - event order different from real devices
- 94. Bug 861876 - [...] multiple mousemoves being fired