Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Getting touchy - an introduction to touch events / Sud Web / Avignon 17.05.2013

28,105 views

Published on

Published in: Technology

Getting touchy - an introduction to touch events / Sud Web / Avignon 17.05.2013

  1. getting touchyAN INTRODUCTION TO TOUCH EVENTSPatrick H. Lauke / Sud Web / Avignon / 17 May 2013
  2. how can I make my websitework on touch devices?
  3. you dont need touch eventsbrowsers emulate regular mouse events
  4. patrickhlauke.github.io/touch/tests/event-listener_mouse-only.html
  5. mouseover > mousemove* > mousedown >(focus) > mouseup > click*only a single “sacrificial” events is fired
  6. on first tapmouseover > mousemove > mousedown >(focus) > mouseup > clicksubsequent tapsmousemove > mousedown > (focus) >mouseup > clicktapping awaymouseout > (blur)focus/blur only on focusable elements in Opera Mobile and Firefoxmouseout not on iOS Safari and embedded WebView (e.g. iOS Chrome)
  7. emulation works but islimiting/problematic(more on that in a minute)
  8. “we need to go deeper...”
  9. touch eventsintroduced in iOS, adopted in Chrome/Firefox/Operawww.w3.org/TR/touch-events
  10. touchstarttouchmovetouchendtouchcancel
  11. patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html
  12. touchstart > [touchmove]+ > touchend >mouseover > mousemove > mousedown >(focus) > mouseup > click
  13. on first taptouchstart > [touchmove]+ > touchend > mouseover >mousemove > mousedown > (focus) > mouseup > clicksubsequent tapstouchstart > [touchmove]+ > touchend > mousemove >mousedown > (focus) > mouseup > clicktapping awaymouseout > (blur)too many touchmove events abort the tap (after touchend)not all browsers consistently send the touchmovesome browsers outright weird...
  14. Browser/Android 4.2.2(AppleWebKit/534.30)mouseover > mousemove > touchstart > touchend > mousedown >mouseup > clickBrowser/Blackberry PlayBook 2.0(AppleWebKit/536.2)touchstart > mouseover > mousemove > mousedown > touchend >mouseup > click
  15. limitations/problems ofmouse event emulation
  16. webkrauts.de/artikel/2012/einfuehrung-touch-events
  17. 1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesnt track
  18. 1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesnt track
  19. patrickhlauke.github.io/touch/tests/event-listener_show-delay.html
  20. patrickhlauke.github.io/touch/tests/event-listener.html
  21. “how can we make it feelresponsive like a native app?”
  22. simple feature detection fortouch 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. dont make it touch-exclusive
  26. hacks.mozilla.org/2013/04/detecting-touch...
  27. www.stucox.com/blog/you-cant-detect-a-touchscreen
  28. if (ontouchstart in window) {/* browser supports touch eventsbut user is not necessarilyusing touch (exclusively) */}
  29. hybrid devicestouch + mouse + keyboard
  30. Android + mouse – behaves like touchtouchstart > touchend > mouseover > mousemove > mousedown > mouseup > click
  31. Blackberry PlayBook 2.0 + mouse – like desktop mousemouseover > mousedown > mousemove > mouseup > click
  32. Android + keyboard – like desktop keyboardfocus > click
  33. VoiceOver enables keyboard access on iOS
  34. iOS + keyboard – similar to touchfocus > touchstart > touchend > mouseover > mousemove > mousedownblur > mouseup > click
  35. mouse or touchvsmouse and touch
  36. /* doubled-up event listeners */foo.addEventListener(touchstart,someFunction, false);foo.addEventListener(click,someFunction, false);
  37. /* 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);
  38. preventDefaultkills scrolling, long-press,pinch/zoom
  39. patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html
  40. 1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesnt track
  41. vimeo.com/ondemand
  42. no isolated hover (or focus)on touch devices** iOS fakes it, Samsung Galaxy S4 + stylus, ...
  43. http://developer.apple.com/library/IOS/...
  44. avoid hover-based interfaces?complement for keyboard / touch!
  45. Modernizr issue 869: Detecting a mouse user
  46. 1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesnt track
  47. patrickhlauke.github.io/touch/particle/2
  48. touchstart > [touchmove]+ > touchend >mouseover > mousemove* > mousedown >(focus) > mouseup > click*mouse event emulation fires only a single mousemove
  49. doubling up handling ofmousemove and touchmove
  50. var posX, posY;...function positionHandler(e) {posX = e.clientX;posY = e.clientY;}...canvas.addEventListener(mousemove,positionHandler, false);
  51. var posX, posY;...function positionHandler(e) {/* handle both mouse and touch? */}...canvas.addEventListener(mousemove,positionHandler, false);canvas.addEventListener(touchmove,positionHandler, false);
  52. 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
  53. 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
  54. 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
  55. 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 );
  56. patrickhlauke.github.io/touch/particle/3
  57. patrickhlauke.github.io/touch/particle/4
  58. tracking finger movement=> swipe gestures
  59. patrickhlauke.github.io/touch/picture-slider
  60. dont forget mouse/keyboard !
  61. bradfrostweb.com/demo/mobile-first
  62. touchmove fires...a lot!
  63. patrickhlauke.github.io/touch/touch-limit
  64. heavy javascript onrequestAnimationFramesetInterval
  65. why stop at a single point?multitouch support
  66. 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
  67. for (i=0; i<e.targetTouches.length; i++) {...posX = e.targetTouches[i].clientX;posY = e.targetTouches[i].clientY;...}
  68. patrickhlauke.github.io/touch/tracker/multi-touch-tracker.html
  69. iOS/iPad even preventDefault()cant override 4-finger gestures
  70. multitouch gestures
  71. /* 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 thesefrom basic principles. */var distance = Math.sqrt(Math.pow(...)+Math.pow(...));var angle = Math.atan2(...);
  72. patrickhlauke.github.io/touch/pinch-zoom-rotate
  73. shinydemos.com/picture-organizer
  74. www.html5rocks.com/en/mobile/touchandmouse
  75. touch events and IE10
  76. blogs.msdn.com/...
  77. www.w3.org/TR/pointerevents
  78. pointerover > mouseover >pointerdown > mousedown >pointermove > mousemove >(focus) >pointerup > mouseup >pointerout > mouseout >clickmouse events fired “inline” with pointer events!
  79. 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
  80. /* Pointer Events extend Mouse Eventsvs 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
  81. preventDefault() wont worktouch-action: auto|none|[pan-x][pan-y]www.w3.org/TR/pointerevents/#the-touch-action-css-property
  82. blogs.msdn.com/b/davrous/.../handling-touch-in-your-html5-apps...
  83. html5labs.interoperabilitybridges.com/prototypes/...
  84. handjs.codeplex.com
  85. /* 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? */
  86. www.exploretouch.ie/behind-the-scenes
  87. debugging/testing
  88. Issue 181204: Emulate touch events - event order different from real devices
  89. developers.google.com/chrome-developer-tools/docs/console#monitoring_events
  90. Bug 861876 - [...] multiple mousemoves being fired
  91. youtube.com/watch?v=AZKpByV5764
  92. merci@patrick_h_laukegithub.com/patrickhlauke/touchslideshare.net/reduxpaciellogroup.comsplintered.co.uk

×