Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
•
12 likes•6,346 views
The document describes different types of touch and mouse events that occur during interactions on touchscreen and non-touchscreen devices. It provides details on events like touchstart, touchmove, touchend, mouseover, mousedown etc. and discusses how to handle these events consistently across device types using the Pointer Events API.
Report
Share
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
- 7. mouseover > mousemove* > mousedown > (focus) > mouseup > click
- 8. mouseover > mousemove > mousedown > (focus) > mouseup > click mousemove > mousedown > (focus) > mouseup > click mouseout > (blur) focus/blur mouseout
- 23. touchstart > [touchmove]+ > touchend > mouseover > mousemove > mousedown > (focus) > mouseup > click
- 24. touchstart > [touchmove]+ > touchend > mouseover > mousemove > mousedown > (focus) > mouseup > click touchstart > [touchmove]+ > touchend > mousemove > mousedown > (focus) > mouseup > click mouseout > (blur) touchmove touchend touchmove
- 25. mouseover > mousemove > touchstart > touchend > mousedown > mouseup > click touchstart > mouseover > mousemove > mousedown > touchend > mouseup > click
- 34. if ('ontouchstart' in window) { /* some clever stuff here */ }
- 35. /* common performance “trick” */ var clickEvent = ('ontouchstart' in window ? 'touchend' : 'click'); blah.addEventListener(clickEvent, function() { ... }, false);
- 38. if ('ontouchstart' in window) { /* browser supports touch events but user is not necessarily using touch (exclusively) */ }
- 42. touchstart > touchend > mouseover > mousemove > mousedown > mouseup > click
- 43. mouseover > mousedown > mousemove > mouseup > click
- 44. focus > click
- 46. focus > touchstart > touchend > mouseover > mousemove > mousedown blur > mouseup > click
- 47. focus > touchstart > touchend > mouseover > mousemove > mousedown blur > mouseup > click
- 48. focus > blur > mousedown > mouseup > click > focus(?)
- 51. /* doubled-up event listeners */ foo.addEventListener('touchstart', someFunction, false); foo.addEventListener('click', someFunction, false);
- 52. /* 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);
- 54. preventDefault
- 67. touchstart > [touchmove]+ > touchend > mouseover > mousemove* > mousedown > (focus) > mouseup > click
- 69. var posX, posY; ... function positionHandler(e) { posX = e.clientX; posY = e.clientY; } ... canvas.addEventListener('mousemove', positionHandler, false);
- 70. var posX, posY; ... function positionHandler(e) { /* handle both mouse and touch? */ } ... canvas.addEventListener('mousemove', positionHandler, false); canvas.addEventListener('touchmove', positionHandler, false);
- 71. interface MouseEvent : readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute relatedTarget; void }; UIEvent { long long long long boolean boolean boolean boolean unsigned short EventTarget screenX; screenY; clientX; clientY; ctrlKey; shiftKey; altKey; metaKey; button; initMouseEvent(...);
- 72. interface TouchEvent : readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute }; UIEvent { TouchList TouchList TouchList boolean boolean boolean boolean touches; targetTouches; changedTouches; altKey; metaKey; ctrlKey; shiftKey;
- 73. 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;
- 74. 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 );
- 85. touchmove
- 86. touchmove
- 90. interface TouchEvent : readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute }; UIEvent { TouchList TouchList TouchList boolean boolean boolean boolean touches; targetTouches; changedTouches; altKey; metaKey; ctrlKey; shiftKey;
- 91. for (i=0; i<e.targetTouches.length; i++) { ... posX = e.targetTouches[i].clientX; posY = e.targetTouches[i].clientY; ... }
- 93. preventDefault()
- 94. preventDefault()
- 96. /* 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
- 97. /* with some trigonometry we can replicate these from basic principles. */ var distance = Math.sqrt(Math.pow(...)+Math.pow(...)); var angle = Math.atan2(...);
- 109. pointerover > mouseover > pointerdown > mousedown > pointermove > mousemove > (focus) > pointerup > mouseup > pointerout > mouseout > click
- 112. interface MouseEvent : readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute relatedTarget; void }; UIEvent { long long long long boolean boolean boolean boolean unsigned short EventTarget screenX; screenY; clientX; clientY; ctrlKey; shiftKey; altKey; metaKey; button; initMouseEvent(...);
- 113. /* Pointer Events extend Mouse Events vs Touch Events and their completely new objects/arrays */ interface PointerEvent : MouseEvent readonly attribute long readonly attribute long readonly attribute long readonly attribute float readonly attribute long readonly attribute long readonly attribute DOMString readonly attribute boolean }; { pointerId; width; height; pressure; tiltX; tiltY; pointerType; isPrimary;
- 122. touch-action:none
- 124. touch-action:none
- 127. touch-action:none
- 131. /* PointerEvents don't have the handy touch arrays, so we have to replicate something similar... */
- 132. /* 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; }
- 134. /* 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? */