getting touchyAN INTRODUCTION TO TOUCH EVENTSPatrick H. Lauke / Web Standards Days / Москва/ 24 November 2012
you dont need touch events
browsers emulate regular    mouse events
people.opera.com/patrickl/.../mouse-event-simulation
mouseover > mousemove > mousedown >     (focus) > mouseup > click
on first tap  mouseover > mousemove > mousedown >       (focus) > mouseup > click                    subsequent taps    mo...
emulation works but is limiting/problematic   (more on that in a minute)
touch eventswww.w3.org/TR/touch-events
touchstart  touchmove   touchendtouchcancel
people.opera.com/patrickl/.../mouse-event-simulation
touchstart > [touchmove]+ > touchend >  mouseover > mousemove > mousedown >       (focus) > mouseup > click
on first taptouchstart > [touchmove]+ > touchend > mouseover > mousemove > mousedown > (focus) > mouseup > click          ...
limitations/problems of mouse        event emulation
1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesnt track
1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesnt track
people.opera.com/patrickl/.../touch-delay
simple feature detection for       touch events
if (ontouchstart in window) {    /* some clever stuff here */}
/* common performance “trick” */var event = click;if (ontouchstart in window) {    event = touchstart;}foo.addEventListene...
dont make it touch-exclusive
hybrid devicestouch + mouse + keyboard
/* doubled-up event listeners */foo.addEventListener(click,    function(e) {…}, false);foo.addEventListener(touchstart,   ...
/* doubled-up event listeners */foo.addEventListener(click,    function(e) {…},false);foo.addEventListener(touchstart,    ...
preventDefaultkills scrolling, long-press,        pinch/zoom
1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesnt track
no isolated hover (or focus)     on touch devices
http://developer.apple.com/library/IOS/...
people.opera.com/patrickl/.../css-dropdown
/* pure CSS dropdown */ul.menu li:hover ul { display: block; }<ul class="menu">  <li><a href="">Menu 1</a></li>  <li class...
/* CSS and JS dropdown */ul.menu li:hover ul,ul.menu li.open ul { display: block; }/* make it keyboard accessible */docume...
/* CSS and JS dropdown */ul.menu li:hover ul,ul.menu li.open ul { display: block; }/* touch opens menu */document.querySel...
1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesnt track
people.opera.com/patrickl/experiments/canvas/particle/2
var posX, posY;...function positionHandler(e) {    posX = e.clientX;    posY = e.clientY;}...canvas.addEventListener(mouse...
interface MouseEvent : UIEvent {   readonly attribute long             screenX;   readonly attribute long             scre...
var posX, posY;...function positionHandler(e) {  /* handle both mouse and touch? */}...canvas.addEventListener(mousemove, ...
interface TouchEvent : UIEvent {   readonly attribute TouchList touches;   readonly attribute TouchList targetTouches;   r...
interface Touch {   readonly attribute        long          identifier;   readonly attribute        EventTarget   target; ...
var posX, posY;...function positionHandler(e) {   if ((e.clientX)&&(e.clientY)) {      posX = e.clientX;      posY = e.cli...
people.opera.com/patrickl/experiments/canvas/particle/3
people.opera.com/patrickl/experiments/canvas/particle/4
people.opera.com/patrickl/.../ratchet-slider
touchmove fires...a lot!
people.opera.com/patrickl/.../touch-limit
why stop at a single point?   multitouch support
for (i=0; i<e.targetTouches.length; i++) {    ...    posX = e.targetTouches[i].clientX;    posY = e.targetTouches[i].clien...
people.opera.com/patrickl/.../tracker/
multitouch gestures
/* iOS Safari has gesture events for size/rotation   with some trigonometry we can make this x-browser */var distance = Ma...
people.opera.com/patrickl/.../pinch-zoom-rotate
shinydemos.com/picture-organizer
touch events and IE10
blogs.msdn.com/...
www.w3.org/2012/pointerevents
smus.com/mouse-touch-pointer
youtube.com/watch?v=AZKpByV5764
www.opera.com/developer   patrick.lauke@opera.com
Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012
Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012
Nächste SlideShare
Wird geladen in …5
×

Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012

5.555 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie
0 Kommentare
6 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
5.555
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
398
Aktionen
Geteilt
0
Downloads
23
Kommentare
0
Gefällt mir
6
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012

  1. 1. getting touchyAN INTRODUCTION TO TOUCH EVENTSPatrick H. Lauke / Web Standards Days / Москва/ 24 November 2012
  2. 2. you dont need touch events
  3. 3. browsers emulate regular mouse events
  4. 4. people.opera.com/patrickl/.../mouse-event-simulation
  5. 5. mouseover > mousemove > mousedown > (focus) > mouseup > click
  6. 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 Firefoxmouseout not on iOS Safari and embedded WebView (e.g. iOS Chrome)
  7. 7. emulation works but is limiting/problematic (more on that in a minute)
  8. 8. touch eventswww.w3.org/TR/touch-events
  9. 9. touchstart touchmove touchendtouchcancel
  10. 10. people.opera.com/patrickl/.../mouse-event-simulation
  11. 11. touchstart > [touchmove]+ > touchend > mouseover > mousemove > mousedown > (focus) > mouseup > click
  12. 12. on first taptouchstart > [touchmove]+ > touchend > mouseover > mousemove > mousedown > (focus) > mouseup > click subsequent tapstouchstart > [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
  13. 13. limitations/problems of mouse event emulation
  14. 14. 1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesnt track
  15. 15. 1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesnt track
  16. 16. people.opera.com/patrickl/.../touch-delay
  17. 17. simple feature detection for touch events
  18. 18. if (ontouchstart in window) { /* some clever stuff here */}
  19. 19. /* common performance “trick” */var event = click;if (ontouchstart in window) { event = touchstart;}foo.addEventListener(event,function(e){ /* execute on click or touch */}, false);
  20. 20. dont make it touch-exclusive
  21. 21. hybrid devicestouch + mouse + keyboard
  22. 22. /* doubled-up event listeners */foo.addEventListener(click, function(e) {…}, false);foo.addEventListener(touchstart, function(e) {…}, false);
  23. 23. /* doubled-up event listeners */foo.addEventListener(click, function(e) {…},false);foo.addEventListener(touchstart, function(e) { … /* stop mouse event emulation */ e.preventDefault();},false);
  24. 24. preventDefaultkills scrolling, long-press, pinch/zoom
  25. 25. 1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesnt track
  26. 26. no isolated hover (or focus) on touch devices
  27. 27. http://developer.apple.com/library/IOS/...
  28. 28. people.opera.com/patrickl/.../css-dropdown
  29. 29. /* pure CSS dropdown */ul.menu li:hover ul { display: block; }<ul class="menu"> <li><a href="">Menu 1</a></li> <li class="submenu"><a href="">Menu 2</a> <ul> ... </ul> </li> ...</ul>
  30. 30. /* CSS and JS dropdown */ul.menu li:hover ul,ul.menu li.open ul { display: block; }/* make it keyboard accessible */document.querySelectorAll(ul.menu li.submenu > a).addEventListener(focus, function(e) { ... this.parentNode.classList.add(open);},false);
  31. 31. /* CSS and JS dropdown */ul.menu li:hover ul,ul.menu li.open ul { display: block; }/* touch opens menu */document.querySelectorAll(ul.menu li.submenu > a).addEventListener(touchstart, function(e) { ... if (!this.parentNode.classList.contains(open)) { ... this.parentNode.classList.add(open); e.preventDefault(); }},false);
  32. 32. 1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesnt track
  33. 33. people.opera.com/patrickl/experiments/canvas/particle/2
  34. 34. var posX, posY;...function positionHandler(e) { posX = e.clientX; posY = e.clientY;}...canvas.addEventListener(mousemove, positionHandler, false);
  35. 35. 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 ...
  36. 36. var posX, posY;...function positionHandler(e) { /* handle both mouse and touch? */}...canvas.addEventListener(mousemove, positionHandler, false);canvas.addEventListener(touchmove, positionHandler, false);
  37. 37. 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
  38. 38. 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
  39. 39. 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 );
  40. 40. people.opera.com/patrickl/experiments/canvas/particle/3
  41. 41. people.opera.com/patrickl/experiments/canvas/particle/4
  42. 42. people.opera.com/patrickl/.../ratchet-slider
  43. 43. touchmove fires...a lot!
  44. 44. people.opera.com/patrickl/.../touch-limit
  45. 45. why stop at a single point? multitouch support
  46. 46. for (i=0; i<e.targetTouches.length; i++) { ... posX = e.targetTouches[i].clientX; posY = e.targetTouches[i].clientY; /* do something clever */}
  47. 47. people.opera.com/patrickl/.../tracker/
  48. 48. multitouch gestures
  49. 49. /* iOS Safari has gesture events for size/rotation with some trigonometry we can make this x-browser */var distance = Math.sqrt(Math.pow(...)+Math.pow(...));var angle = Math.atan2(...);
  50. 50. people.opera.com/patrickl/.../pinch-zoom-rotate
  51. 51. shinydemos.com/picture-organizer
  52. 52. touch events and IE10
  53. 53. blogs.msdn.com/...
  54. 54. www.w3.org/2012/pointerevents
  55. 55. smus.com/mouse-touch-pointer
  56. 56. youtube.com/watch?v=AZKpByV5764
  57. 57. www.opera.com/developer patrick.lauke@opera.com

×