Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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.623 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

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

×