mouseover > mousemove* > mousedown >
(focus) > mouseup > click
mouseover > mousemove > mousedown >
(focus) > mouseup > click

mousemove > mousedown > (focus) >
mouseup > click

mouseout...
touchstart
touchmove
touchend
touchcancel
touchenter
touchleave
touchstart > [touchmove]+ > touchend >
mouseover > mousemove > mousedown >
(focus) > mouseup > click
touchstart > [touchmove]+ > touchend > mouseover >
mousemove > mousedown > (focus) > mouseup > click

touchstart > [touchm...
mouseover > mousemove > touchstart > touchend > mousedown >
mouseup > click

touchstart > mouseover > mousemove > mousedow...
if ('ontouchstart' in window) {
/* some clever stuff here */

}
/* common performance “trick” */
var clickEvent = ('ontouchstart' in window ?
'touchend' : 'click');
blah.addEventListener...
if ('ontouchstart' in window) {
/* browser supports touch events
but user is not necessarily
using touch (exclusively) */
...
touchstart > touchend > mouseover > mousemove > mousedown > mouseup > click
mouseover > mousedown > mousemove > mouseup > click
focus > click
focus > touchstart > touchend > mouseover > mousemove > mousedown
blur > mouseup > click
focus > touchstart > touchend > mouseover > mousemove > mousedown
blur > mouseup > click
focus > blur > mousedown > mouseup > click > focus(?)
/* doubled-up event listeners */
foo.addEventListener('touchstart',
someFunction, false);

foo.addEventListener('click',
s...
/* doubled-up event listeners */
foo.addEventListener('touchstart',
function(e) {
/* prevent delay+mouse events */
e.preve...
preventDefault
touchstart > [touchmove]+ > touchend >
mouseover > mousemove* > mousedown >
(focus) > mouseup > click
mousemove

touchmove
var posX, posY;

...
function positionHandler(e) {
posX = e.clientX;
posY = e.clientY;
}
...

canvas.addEventListener('mou...
var posX, posY;
...
function positionHandler(e) {
/* handle both mouse and touch? */
}
...
canvas.addEventListener('mousem...
interface MouseEvent :
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
read...
interface TouchEvent :
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
read...
interface Touch {
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly ...
var posX, posY;
...
function positionHandler(e) {
if ((e.clientX)&&(e.clientY)) {
posX = e.clientX;
posY = e.clientY;
} el...
touchmove
touchmove
requestAnimationFrame
setInterval
interface TouchEvent :
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
read...
for (i=0; i<e.targetTouches.length; i++) {
...
posX = e.targetTouches[i].clientX;
posY = e.targetTouches[i].clientY;
...
}
preventDefault()
preventDefault()
/* iOS/Safari has gesture events for size/rotation,
not supported in Chrome/Firefox/Opera,
not part of the W3C Touch Event...
/* with some trigonometry we can replicate these
from basic principles. */
var distance = Math.sqrt(Math.pow(...)+Math.pow...
pointerover > mouseover >
pointerdown > mousedown >
pointermove > mousemove >
(focus) >
pointerup > mouseup >
pointerout >...
pointerenter
pointerleave
gotpointercapture
lostpointercapture
MSPointerDown
MSPointerMove
MSPointerUp
navigator.msPointerEnabled
navigator.msMaxTouchPoints
-ms-touch-action
interface MouseEvent :
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
read...
/* Pointer Events extend Mouse Events
vs Touch Events and their completely new objects/arrays */

interface PointerEvent :...
preventDefault()
pointerdown
touch-action: auto|none|[pan-x][pan-y]
touch-action:none
touch-action:none
touch-action:none
/* PointerEvents don't have the handy touch arrays,
so we have to replicate something similar... */
/* PointerEvents don't have the handy touch arrays,
so we have to replicate something similar... */
var points = [];
switc...
/* like iOS/Safari, IE10/Win has higher-level gestures,
but these are not part of the W3C Pointer Events spec.
Replicate t...
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Upcoming SlideShare
Loading in …5
×

Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013

4,836
-1

Published on

Published in: Technology, Design
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,836
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
27
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013

  1. 1. mouseover > mousemove* > mousedown > (focus) > mouseup > click
  2. 2. mouseover > mousemove > mousedown > (focus) > mouseup > click mousemove > mousedown > (focus) > mouseup > click mouseout > (blur) focus/blur mouseout
  3. 3. touchstart touchmove touchend touchcancel touchenter touchleave
  4. 4. touchstart > [touchmove]+ > touchend > mouseover > mousemove > mousedown > (focus) > mouseup > click
  5. 5. touchstart > [touchmove]+ > touchend > mouseover > mousemove > mousedown > (focus) > mouseup > click touchstart > [touchmove]+ > touchend > mousemove > mousedown > (focus) > mouseup > click mouseout > (blur) touchmove touchend touchmove
  6. 6. mouseover > mousemove > touchstart > touchend > mousedown > mouseup > click touchstart > mouseover > mousemove > mousedown > touchend > mouseup > click
  7. 7. if ('ontouchstart' in window) { /* some clever stuff here */ }
  8. 8. /* common performance “trick” */ var clickEvent = ('ontouchstart' in window ? 'touchend' : 'click'); blah.addEventListener(clickEvent, function() { ... }, false);
  9. 9. if ('ontouchstart' in window) { /* browser supports touch events but user is not necessarily using touch (exclusively) */ }
  10. 10. touchstart > touchend > mouseover > mousemove > mousedown > mouseup > click
  11. 11. mouseover > mousedown > mousemove > mouseup > click
  12. 12. focus > click
  13. 13. focus > touchstart > touchend > mouseover > mousemove > mousedown blur > mouseup > click
  14. 14. focus > touchstart > touchend > mouseover > mousemove > mousedown blur > mouseup > click
  15. 15. focus > blur > mousedown > mouseup > click > focus(?)
  16. 16. /* doubled-up event listeners */ foo.addEventListener('touchstart', someFunction, false); foo.addEventListener('click', someFunction, false);
  17. 17. /* 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);
  18. 18. preventDefault
  19. 19. touchstart > [touchmove]+ > touchend > mouseover > mousemove* > mousedown > (focus) > mouseup > click
  20. 20. mousemove touchmove
  21. 21. var posX, posY; ... function positionHandler(e) { posX = e.clientX; posY = e.clientY; } ... canvas.addEventListener('mousemove', positionHandler, false);
  22. 22. var posX, posY; ... function positionHandler(e) { /* handle both mouse and touch? */ } ... canvas.addEventListener('mousemove', positionHandler, false); canvas.addEventListener('touchmove', positionHandler, false);
  23. 23. 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(...);
  24. 24. 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;
  25. 25. 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;
  26. 26. 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 );
  27. 27. touchmove
  28. 28. touchmove
  29. 29. requestAnimationFrame setInterval
  30. 30. 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;
  31. 31. for (i=0; i<e.targetTouches.length; i++) { ... posX = e.targetTouches[i].clientX; posY = e.targetTouches[i].clientY; ... }
  32. 32. preventDefault()
  33. 33. preventDefault()
  34. 34. /* 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
  35. 35. /* with some trigonometry we can replicate these from basic principles. */ var distance = Math.sqrt(Math.pow(...)+Math.pow(...)); var angle = Math.atan2(...);
  36. 36. pointerover > mouseover > pointerdown > mousedown > pointermove > mousemove > (focus) > pointerup > mouseup > pointerout > mouseout > click
  37. 37. pointerenter pointerleave gotpointercapture lostpointercapture
  38. 38. MSPointerDown MSPointerMove MSPointerUp navigator.msPointerEnabled navigator.msMaxTouchPoints -ms-touch-action
  39. 39. 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(...);
  40. 40. /* 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;
  41. 41. preventDefault() pointerdown
  42. 42. touch-action: auto|none|[pan-x][pan-y]
  43. 43. touch-action:none
  44. 44. touch-action:none
  45. 45. touch-action:none
  46. 46. /* PointerEvents don't have the handy touch arrays, so we have to replicate something similar... */
  47. 47. /* 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; }
  48. 48. /* 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? */
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×