Your SlideShare is downloading. ×
Getting touchy - an introduction to touch events / Sainté Mobile Days / Saint-Etienne 22.11.2013
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Getting touchy - an introduction to touch events / Sainté Mobile Days / Saint-Etienne 22.11.2013

4,731
views

Published on

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
4,731
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. getting touchy AN INTRODUCTION TO TOUCH EVENTS Patrick H. Lauke / Sainté Mobile Days / Saint-Etienne / 22 November 2013
  • 2. “how can I make my website work on touch devices?”
  • 3. you don't need touch events browsers emulate regular mouse events
  • 4. patrickhlauke.github.io/touch/tests/event-listener_mouse-only.html
  • 5. patrickhlauke.github.io/touch/tests/event-listener_mouse-only.html
  • 6. mouseover > mousemove* > mousedown > (focus) > mouseup > click *only a single “sacrificial” event is fired
  • 7. emulation works, but is limiting/problematic
  • 8. 1. delayed event dispatch 2. mousemove doesn't track there are more (e.g. no concept of hover on touchscreens)
  • 9. 1. delayed event dispatch 2. mousemove doesn't track
  • 10. patrickhlauke.github.io/touch/tests/event-listener_show-delay.html
  • 11. patrickhlauke.github.io/touch/tests/event-listener_show-delay.html
  • 12. 1. delayed event dispatch 2. mousemove doesn't track
  • 13. patrickhlauke.github.io/touch/particle/2
  • 14. patrickhlauke.github.io/touch/particle/2 (bug in iOS7: moving finger does seem to scroll and fire multiple mousemove events?!)
  • 15. “we need to go deeper...”
  • 16. touch events introduced in iOS 2.0, adopted in Chrome/Firefox/Opera www.w3.org/TR/touch-events
  • 17. touchstart touchmove touchend touchcancel touchenter touchleave
  • 18. patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html
  • 19. patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html
  • 20. touchstart > [touchmove]+ > touchend > mouseover > mousemove > mousedown > (focus) > mouseup > click
  • 21. Browser/Android 4.3 (AppleWebKit/534.30) mouseover > mousemove > touchstart > touchend > mousedown > mouseup > click Browser/Blackberry PlayBook 2.0 (AppleWebKit/536.2) touchstart > mouseover > mousemove > mousedown > touchend > mouseup > click
  • 22. touch events vs limitations/problems
  • 23. 1. delayed event dispatch 2. mousemove doesn't track
  • 24. 1. delayed event dispatch 2. mousemove doesn't track
  • 25. patrickhlauke.github.io/touch/tests/event-listener.html
  • 26. patrickhlauke.github.io/touch/tests/event-listener.html
  • 27. “how can we make it feel responsive like a native app?”
  • 28. react to events fired before the 300ms delay...
  • 29. interlude: simple feature detection for touch events
  • 30. if ('ontouchstart' in window) { /* some clever stuff here */ }
  • 31. /* common performance “trick” */ var clickEvent = ('ontouchstart' in window ? 'touchend' : 'click'); blah.addEventListener(clickEvent, function() { ... }, false);
  • 32. don't make it touch-exclusive
  • 33. if ('ontouchstart' in window) { /* browser supports touch events but user is not necessarily using touch (exclusively) */ }
  • 34. hybrid devices touch + mouse + keyboard
  • 35. Android + mouse – behaves like touch touchstart > touchend > mouseover > mousemove > mousedown > mouseup > click
  • 36. Android + keyboard – like desktop keyboard focus > click
  • 37. VoiceOver enables keyboard access on iOS
  • 38. iOS + keyboard – similar to touch focus > touchstart > touchend > mouseover > mousemove > mousedown blur > mouseup > click
  • 39. iOS + VoiceOver – similar to touch focus > touchstart > touchend > mouseover > mousemove > mousedown blur > mouseup > click
  • 40. Android + TalkBack – keyboard/mouse hybrid focus > blur > mousedown > mouseup > click > focus(?)
  • 41. touch or mouse or keyboard
  • 42. touch and mouse and keyboard
  • 43. /* doubled-up event listeners */ foo.addEventListener('touchend', someFunction, false); foo.addEventListener('click', someFunction, false);
  • 44. /* doubled-up event listeners */ foo.addEventListener('touchend', function(e) { /* prevent delay + mouse events */ e.preventDefault(); someFunction(); /* or even e.target.click(); */ }, false); foo.addEventListener('click', someFunction, false);
  • 45. github.com/ftlabs/fastclick
  • 46. preventDefault kills scrolling, long-press, pinch/zoom
  • 47. browsers working to remove delay when possible
  • 48. patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html
  • 49. patrickhlauke.github.io/touch/tests/event-listener_minimum-maximum-scale.html
  • 50. patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html
  • 51. [...] no more 300ms click delay, or double-tap zoom, on mobile websites
  • 52. patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html
  • 53. iOS/Safari designed themselves into a corner with “double-tap to scroll” bugs.webkit.org/show_bug.cgi?id=122212
  • 54. 1. delayed event dispatch 2. mousemove doesn't track
  • 55. patrickhlauke.github.io/touch/particle/2
  • 56. patrickhlauke.github.io/touch/particle/2 (bug in iOS7: moving finger does seem to scroll and fire multiple mousemove events?!)
  • 57. touchstart > [touchmove]+ > touchend > mouseover > mousemove* > mousedown > (focus) > mouseup > click *mouse event emulation fires only a single mousemove
  • 58. doubling up handling of mousemove and touchmove
  • 59. var posX, posY; ... function positionHandler(e) { posX = e.clientX; posY = e.clientY; } ... canvas.addEventListener('mousemove', positionHandler, false);
  • 60. var posX, posY; ... function positionHandler(e) { /* handle both mouse and touch? */ } ... canvas.addEventListener('mousemove', positionHandler, false); canvas.addEventListener('touchmove', positionHandler, false);
  • 61. 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
  • 62. 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
  • 63. 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; www.w3.org/TR/touch-events/#touch-interface
  • 64. 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 );
  • 65. patrickhlauke.github.io/touch/particle/3
  • 66. tracking finger movement over time ... swipe gestures
  • 67. patrickhlauke.github.io/touch/swipe
  • 68. patrickhlauke.github.io/touch/swipe
  • 69. patrickhlauke.github.io/touch/picture-slider
  • 70. don't forget mouse/keyboard !
  • 71. touchmove fires...a lot!
  • 72. do absolute minimum on each touchmove (usually: store new coordinates)
  • 73. heavy JavaScript on requestAnimationFrame setInterval
  • 74. patrickhlauke.github.io/touch/touch-limit
  • 75. why stop at a single point? multitouch support
  • 76. 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
  • 77. for (i=0; i<e.targetTouches.length; i++) { ... posX = e.targetTouches[i].clientX; posY = e.targetTouches[i].clientY; ... }
  • 78. patrickhlauke.github.io/touch/tracker/multi-touch-tracker.html
  • 79. iOS/iPad even preventDefault() can't override 4-finger gestures
  • 80. iOS7/Safari even preventDefault() can't override back/forward swipe gestures
  • 81. /* iOS/Safari has gesture events for size/rotation not supported in Chrome/Firefox, not part of the W3C Touch Events specification. With some trigonometry we can replicate these from basic principles. */ var distance = Math.sqrt(Math.pow(...)+Math.pow(...)); var angle = Math.atan2(...);
  • 82. shinydemos.com/picture-organizer
  • 83. touch events and Internet Explorer...
  • 84. blogs.msdn.com/...
  • 85. www.w3.org/TR/pointerevents
  • 86. not just some “not invented here” new approach for IE10+
  • 87. active development by Mozilla and Chrome teams ...Apple?
  • 88. but that's probably enough for now...
  • 89. pour en savoir plus: rendez-vous à l'atelier demain matin @patrick_h_lauke github.com/patrickhlauke/touch slideshare.net/redux paciellogroup.com splintered.co.uk