1. getting touchyAN INTRODUCTION TO TOUCH AND POINTER EVENTSPatrick H. Lauke / Version 1.2.10102014

2. how can I make my websitework on touch devices? 3. patrickhlauke.github.io/touch 4. Touch/pointer events test results 5. how can I make my websitework on touch devices? 6. you don't need touch eventsbrowsers emulate regularmouse events 7. patrickhlauke.github.io/touch/tests/event-listener_mouse-only.html 8. patrickhlauke.github.io/touch/tests/event-listener_mouse-only.html 9. compatibility mouse events(mouseenter) > mouseover > mousemove* > mousedown >(focus) > mouseup > click* only a single sacrificial mousemove event fired 10. on first tap(mouseenter) > mouseover > mousemove >mousedown > (focus) > mouseup > clicksubsequent tapsmousemove > mousedown > mouseup > clicktapping awaymouseout > (blur)focus / blur only on focusable elements in Opera Mobile andFirefoxmouseout not on iOS Safari/WebView (e.g. iOS Chrome) 11. emulation works,but is limiting/problematic 12. 1. delayed event dispatch2. hover/mouseover interfaces3. mousemove doesn't track 13. 1. delayed event dispatch2. hover/mouseover interfaces3. mousemove doesn't track 14. patrickhlauke.github.io/touch/tests/event-listener_show-delay.html 15. patrickhlauke.github.io/touch/tests/event-listener_show-delay.html 16. 1. delayed event dispatch2. hover/mouseover interfaces3. mousemove doesn't track 17. Steam's "hover to reveal screenshot" feature 18. patrickhlauke.github.io/touch/css-dropdown/mouse-only.html 19. 1. delayed event dispatch2. hover/mouseover interfaces3. mousemove doesn't track 20. patrickhlauke.github.io/touch/particle/2 21. patrickhlauke.github.io/touch/particle/2 22. we need to go deeper... 23. touch eventsintroduced by Apple, adoptedin Chrome/Firefox/Operawww.w3.org/TR/touch-events 24. touchstarttouchmovetouchendtouchcanceltouchentertouchleave 25. patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html 26. patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.htmlBug 128534 - 'mouseenter' mouse compat event not fired... 27. events fired on taptouchstart > [touchmove]+ > touchend >(mouseenter) > mouseover > mousemove > mousedown >(focus) > mouseup > click(mouse events only fired for single-finger tap) 28. on first taptouchstart > [touchmove]+ > touchend >(mouseenter) > mouseover > mousemove > mousedown >(focus) > mouseup > clicksubsequent tapstouchstart > [touchmove]+ > touchend >mousemove > mousedown > mouseup > clicktapping awaymouseout > (mouseleave) > (blur) 29. too many touchmove events prevent mouse compatibility eventsafter touchend (not considered a "clean" tap) too many touchmove events on activatable elements can lead totouchcancel (in old Chrome/Browser versions) not all browsers consistently send the touchmovesome browsers outright weird... 30. Browser/Android 4.3(AppleWebKit/534.30)mouseover > mousemove > touchstart > touchend >mousedown > mouseup > clickBrowser/Blackberry PlayBook 2.0(AppleWebKit/536.2)touchstart > mouseover > mousemove > mousedown >touchend > mouseup > click 31. Touch/pointer events test results 32. touch eventsvslimitations/problems 33. 1. delayed event dispatch2. hover/mouseover interfaces3. mousemove doesn't track 34. 1. delayed event dispatch2. hover/mouseover interfaces3. mousemove doesn't track 35. patrickhlauke.github.io/touch/tests/event-listener_show-delay.html 36. why the delay?double-tap to zoom(mostly anyway) 37. what if browsers didn't wait? 38. you can try it out in Chrome/Androidchrome://flags/#disable-click-delay 39. when does the delay happen? 40. patrickhlauke.github.io/touch/tests/event-listener.html 41. patrickhlauke.github.io/touch/tests/event-listener.html 42. touch / mouse events delaytouchstart > [touchmove]+ > touchend >[300ms delay](mouseenter) > mouseover > mousemove > mousedown >(focus) > mouseup > click 43. how can we make it feelresponsive like a native app? 44. react to events fired before the300ms delay... 45. touchstart for animmediate control(fire/jump button on a game) 46. touchend for a control thatfires after finger lifted 47. interlude: simple featuredetection for touch events 48. /* feature detection for touch events */if ( 'ontouchstart' in window ) {/* some clever stuff here */}/* older browsers have flaky support so morehacky tests needed...use Modernizr.touch or similar */ 49. /* common performance trick */var clickEvent =( 'ontouchstart' in window ? 'touchend' : 'click' );blah.addEventListener( clickEvent , function() { ... }, false); 50. don't make it touch-exclusive 51. /* common performance trick */var clickEvent =( 'ontouchstart' in window ? 'touchend' : 'click');.../* if touch events are supported,only listen to touchend, not click */ 52. hybrid devicestouch + mouse + keyboard 53. patrickhlauke.github.io/touch/tests/event-listener_show-delay-naive-event-fix.html 54. Bug 888304 - touch-events on Firefox-desktop should be disabled until we can support themproperly 55. Issue 392584: Enable TouchEvent API all the time 56. Android + mouse behaves like touchtouchstart > touchend > mouseover > mousemove > mousedown >(focus) > mouseup > click 57. Blackberry PlayBook 2.0 + mouse - like desktopmouseover > mousedown > mousemove > mouseup > click 58. Android + keyboard like desktop keyboardfocus > click 59. VoiceOver enables full keyboard access on iOS 60. iOS + keyboard similar to touchfocus > touchstart > touchend > (mouseenter) > mouseover >mousemove > mousedown > blur > mouseup > click 61. iOS + VoiceOver (with/without keyboard) similar to touchfocus > touchstart > touchend > (mouseenter) > mouseover >mousemove > mousedown > blur > mouseup > click 62. Android + TalkBack keyboard/mouse hybridfocus > blur > mousedown > mouseup > click > focus(?) 63. Modernizr.touch detects touch events not touch devices 64. Stu Cox: You can't detect a touchscreen 65. hacks.mozilla.org - Detecting touch [...] 66. /* feature detection for touch events */if ('ontouchstart' in window) {/* browser supports touch events but user isnot necessarily using touch (exclusively) *//* it could be a mobile, tablet, desktop, fridge ... */} 67. touch or mouse or keyboard 68. touch and mouse andkeyboard 69. /* doubled-up event listeners */foo.addEventListener(' touchend ', someFunction, false);foo.addEventListener(' click ', someFunction, false); 70. /* prevent delay + mouse events */foo.addEventListener(' touchstart ', function(e) {e.preventDefault();}, false);/* doubled-up event listeners */foo.addEventListener('touchend', someFunction, false);foo.addEventListener('click', someFunction, false); 71. preventDefault() killsscrolling, pinch/zoom, etc 72. apply preventDefault()carefully(just on buttons/links, not entire page) 73. github.com/ftlabs/fastclick 74. patrickhlauke.github.io/touch/fastclick 75. patrickhlauke.github.io/touch/fastclick/fastclick.html 76. browsers working to removedouble-tap to zoom delay(when page not zoomable) 77. patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html 78. patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html 79. ... content="minimum-scale=1, maximum-scale=1"patrickhlauke.github.io/touch/tests/event-listener_minimum-maximum-scale.html 80. ... content="minimum-scale=1, maximum-scale=1"patrickhlauke.github.io/touch/tests/event-listener_minimum-maximum-scale.html 81. Bug 922896 - Optimizations to remove 300ms [...] delay[RESOLVED FIXED] 82. what about accessibility? 83. patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html 84. ...though 'Browser' doesn't do any of the optimisations... 85. Bug 852247 - [a11y] Force over-ride zoom 86. Chrome 32+ / Android: ... content="width=device-width"updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away 87. Bug 941995 - Remove 300ms [...] on "responsive" pages[RESOLVED FIXED] 88. patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html 89. iOS/Safari designed themselves into a corner: double-tap to scrollBug 122212 - Optimizations to remove 300ms touch > mouse eventsdelay 90. patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay 91. YouTube: iOS8/Safari 300ms delay heuristics(quick tap - with 300ms delay - vs slow tap) 92. 1. delayed event dispatch2. hover/mouseover interfaces3. mousemove doesn't track 93. patrickhlauke.github.io/touch/css-dropdown/mouse-only.html 94. no concept of hoveron touch devicesiOS fakes it, Samsung Galaxy Note II/Pro + stylus, ... 95. patrickhlauke.github.io/touch/css-dropdown/mouse-only.html 96. patrickhlauke.github.io/touch/css-dropdown/mouse-only.html 97. iOS Developer Library - Safari Web Content Guide - Handling Events 98. YouTube: Samsung Galaxy Note Pro 12.2 stylus hover 99. Modernizr: Detecting a mouse user 100. avoid hover/mouseoverinterfaces? 101. complement forkeyboard/touch! 102. patrickhlauke.github.io/touch/css-dropdown/mouse-keyboard.html 103. patrickhlauke.github.io/touch/css-dropdown/mouse-keyboard-touch.html 104. 1. delayed event dispatch2. hover/mouseover interfaces3. mousemove doesn't track 105. patrickhlauke.github.io/touch/particle/2 106. patrickhlauke.github.io/touch/particle/2(iOS7 bug: moving finger fires mousemove on scroll) 107. events fired on taptouchstart > [touchmove]+ > touchend >(mouseenter) > mouseover >mousemove* > mousedown > (focus) >mouseup > click* mouse event emulation fires only a single mousemovetoo many touchmove events prevent mouse compatibility events after touchend 108. doubling up handling ofmousemove and touchmove 109. var posX, posY;...function positionHandler(e) {posX = e.clientX ;posY = e.clientY ;}...canvas.addEventListener(' mousemove ', positionHandler, false); 110. var posX, posY;...function positionHandler(e) {/* handle both mouse and touch */}...canvas.addEventListener(' mousemove ', positionHandler, false);canvas.addEventListener(' touchmove ', positionHandler, false); 111. 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 112. partial interface MouseEvent {readonly attribute double screenX;readonly attribute double screenY;readonly attribute double pageX ;readonly attribute double pageY ;readonly attribute double clientX;readonly attribute double clientY;readonly attribute double x ;readonly attribute double y ;readonly attribute double offsetX ;readonly attribute double offsetY ;};www.w3.org/TR/cssom-view/#extensions-to-the-mouseevent-interface 113. 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 114. 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 115. touchesall touch points on screentargetTouchesall touch points that started on the elementchangedTouchestouch points that caused the event to fire 116. patrickhlauke.github.io/touch/touchlist-objects 117. 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 ); 118. patrickhlauke.github.io/touch/particle/3 119. patrickhlauke.github.io/touch/particle/4 120. www.splintered.co.uk/experiments/archives/paranoid_0.5 121. tracking finger movement overtime ... swipe gestures 122. patrickhlauke.github.io/touch/swipe 123. patrickhlauke.github.io/touch/swipe 124. patrickhlauke.github.io/touch/picture-slider 125. don't forget mouse/keyboard! 126. bradfrostweb.com/demo/mobile-first 127. touchmove fires...a lot! 128. do absolute minimum on eachtouchmove(usually: store coordinates) 129. heavy JavaScript onsetInterval orrequestAnimationFrame 130. patrickhlauke.github.io/touch/touch-limit 131. why stop at a single point?multitouch support 132. 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 133. /* iterate over touch array */for (i=0; i< e.targetTouches .length; i++) {...posX = e.targetTouches[i].clientX ;posY = e.targetTouches[i].clientY ;...} 134. patrickhlauke.github.io/touch/tracker/multi-touch-tracker.html 135. iOS/iPad preventDefault()can't override 4-fingergestures 136. iOS7/Safari preventDefault()can't override back/forwardswipe gestures 137. multitouch gestures 138. /* iOS/Safari/WebView has gesture events for size/rotation,not part of the W3C Touch Events spec. */gesturestart / gesturechange / gestureendfunction(e) {/* e.scalee.rotation */}/* not supported in Chrome/Firefox/Opera */ 139. patrickhlauke.github.io/touch/iosgestures 140. patrickhlauke.github.io/touch/iosgestures/image.html 141. /* with some trigonometry we can replicatethese from basic principles. */var distance = Math.sqrt(Math.pow(...)+Math.pow(...));var angle = Math.atan2(...); 142. patrickhlauke.github.io/touch/pinch-zoom-rotate 143. patrickhlauke.github.io/touch/picture-organiser 144. not all old/cheap devices/OSssupport multitouch! 145. HTC Hero Android 2.1 146. LG Optimus 2X Android 2.3.7 147. ZTE Open Firefox OS 1.1 148. what aboutInternet Explorer? 149. up to IE9 (Win7 / WinPhone7.5)only mouse events 150. in IE10 Microsoft introducedPointer Events 151. David Rousset - Unifying touch and mouse [...] 152. Building Xbox One Apps using HTML and JavaScript 153. not just somenot invented heretechnology 154. Pointer Events - W3C Candidate Recommendation 09 May 2013 155. Pointer Events - W3C Editor's Draft 156. html5labs.interoperabilitybridges.com/prototypes/... 157. Issue 162757: Implement pointer events in Chrome behind experimental flag 158. Bug 822898 - Implement pointer events 159. ...what about Apple? 160. Bug 105463 - Implement pointer events RESOLVED WONTFIXMaciej Stachowiak - [webkit-dev] pointer events specification - first editors draft 161. patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html 162. patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html 163. events fired on tapmousemove* >pointerover > mouseover >pointerenter > mouseenter >pointerdown > mousedown >gotpointercapture >focus >pointermove > mousemove >pointerup > mouseup >lostpointercapture >pointerout > mouseout >pointerleave > mouseleave >clickmouse events fired inline with pointer events(for a primary pointer, e.g. first finger on screen) 164. vendor-prefixed in IE10MSPointerDown etcnavigator.msMaxTouchPoints-ms-touch-actionunprefixed in IE11 (but prefixed versions still mapped for compatibility) 165. /* 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;}/* plus all the classic MouseEvent attributeslike clientX , clientY , etc */ 166. simple feature detection forpointer events 167. /* detecting pointer events support */if ( window.PointerEvent ) {/* some clever stuff here but this coverstouch, stylus, mouse, etc */}/* still listen to click for keyboard! */ 168. /* detect maximum number of touch points */if ( navigator.maxTouchPoints > 0 ) {/* device with a touchscreen */}if ( navigator.maxTouchPoints > 1 ) {/* multitouch-capable device */} 169. are pointer events better? 170. no need for separate mouse ortouch event listeners 171. /* touch events: separate handling */foo.addEventListener('touchmove', ... , false);foo.addEventListener('mousemove', ... , false);/* pointer events: single listener for mouse, stylus, touch */foo.addEventListener(' pointermove ', ... , false); 172. no need for separate mouse ortouch code to get x / y coords 173. /* Pointer Events extend Mouse Events */foo.addEventListener(' pointermove ', function(e) {...posX = e.clientX ;posY = e.clientY ;...}, false);www.w3.org/TR/pointerevents/#pointerevent-interface 174. 3D Rotator by Creative Punchcoded to only use mouse events 175. 3D Rotator modified to use Pointer Eventsminimal code changes, as Pointer Events extend mouse events 176. but you can distinguish mouseor touch or stylus if needed 177. foo.addEventListener('pointermove', function(e) {...switch( e.pointerType ) {case ' mouse ':...break;case ' pen ':...break;case ' touch ':...break;default : /* future-proof */}...} , false); 178. /* in IE11, the pointerType property returns a stringin IE10, the return type is long */MSPOINTER_TYPE_TOUCH: 0x00000002MSPOINTER_TYPE_PEN: 0x00000003MSPOINTER_TYPE_MOUSE: 0x00000004MSDN: IE Dev Center - API reference - pointerType property 179. pointer eventsvslimitations/problems of mouseevent emulation 180. 1. delayed event dispatch2. hover/mouseover interfaces3. mousemove doesn't track 181. 1. delayed event dispatch2. hover/mouseover interfaces3. mousemove doesn't track 182. patrickhlauke.github.io/touch/tests/event-listener_show-delay.html(IE/Win8 has double-tap to zoom, so problem on desktop too) 183. patrickhlauke.github.io/touch/tests/event-listener.html 184. patrickhlauke.github.io/touch/tests/event-listener.html 185. pointer / mouse events and delaymousemove >pointerover > mouseover >pointerenter > mouseenter >pointerdown > mousedown >gotpointercapture >focus >pointermove > mousemove >pointerup > mouseup >lostpointercapture >pointerout > mouseout >pointerleave > mouseleave >[300ms delay]click 186. how can we make it feelresponsive like a native app? 187. we could try a similarapproach to touch events... 188. double-up listeners - pointerup and click prevent code firing twice - preventDefaultpreventDefault() on pointerdown stops mouse compatibilityevents, but click is not considered mouse compatibility event 189. patrickhlauke.github.io/touch/tests/event-listener.html 190. touch-action 191. CSS propertytouch-action: auto | none | [ pan-x || pan-y ] | manipulationwww.w3.org/TR/pointerevents/#the-touch-action-css-propertyonly prevents default touch action (e.g. double-tap to zoom) does notstop synthetic mouse events nor click 192. touch-action:none killsscrolling, long-press,pinch/zoom 193. touch-action:manipulation 194. patrickhlauke.github.io/touch/tests/event-listener_touch[...] 195. Bug 979345 - Implement touch-action:manipulation [...] 196. Issue 349016: Add support for touch-action:manipulationchrome://flags/#enable-experimental-web-platform-features (Chrome 35) 197. Bug 133114 - Implement " touch-action:manipulation " [...] 198. patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html 199. ... content="minimum-scale=1, maximum-scale=1"patrickhlauke.github.io/touch/tests/event-listener_minimum-maximum-scale.html 200. patrickhlauke.github.io/touch/tests/event-listener_user-scalable-no.html 201. ... content="minimum-scale=1, maximum-scale=1"patrickhlauke.github.io/touch/tests/event-listener_minimum-maximum-scale.html 202. ... content="width=device-width"patrickhlauke.github.io/touch/tests/event-listener_width-device-width.html 203. 1. delayed event dispatch2. hover/mouseover interfaces3. mousemove doesn't track 204. MSDN: Hover touch support 205. MSDN: Using aria-haspopup to simulate hover on touch-enabled devices 206. patrickhlauke.github.io/touch/css-dropdown/mouse-only-aria-haspopup.html 207. Channel9 MSDN - IE11: Using Hover Menus with Touch 208. 1. delayed event dispatch2. hover/mouseover interfaces3. mousemove doesn't track 209. patrickhlauke.github.io/touch/particle/2 210. touch-action:none 211. patrickhlauke.github.io/touch/particle/2a 212. what about multitouch? 213. patrickhlauke.github.io/touch/tracker/mouse-tracker_touch-action-none.html 214. /* PointerEvents don't have the handy TouchList objects,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;} 215. patrickhlauke.github.io/touch/tracker/multi-touch-tracker-pointer.html(note multiple isPrimary pointers) 216. /* like iOS/Safari, IE/Win has higher-level gestures ,but these are not part of the W3C Pointer Events spec.Replicate these from basic principles again... */MSDN IE10 Developer Guide: Gesture object and events 217. /* advanced topic: pointer capture */gotpointercapture / lostpointercaptureelement.setPointerCapture(pointerId)patrickhlauke.github.io/touch/tests/pointercapture.html 218. what about backwards-compatibility? 219. touchstart > [touchmove]+ > touchend >[300ms delay] >mouseover > mousemove > mousedown > mouseup > clickvspointerover > mouseover > pointerdown > mousedown >pointermove > mousemove > pointerup > mouseup >pointerout > mouseout > [300ms delay] > click 220. W3C Touch Events Community Group 221. /* cover all cases (hat-tip Stu Cox) */if ('onpointerdown' in window) {/* bind to Pointer Events: pointerdown, pointerup, etc */} else {/* bind to mouse events: mousedown, mouseup, etc */if ('ontouchstart' in window) {/* bind to Touch Events: touchstart, touchend, etc */}}/* bind to keyboard / click */ 222. pointer events as the future? 223. Issue 162757: Implement pointer events in Chrome behind experimental flag WontFix 224. YouTube: Google Developers - HTTP 203: Pointer Events 225. 1. performance issues (hit-testing)2. unified event model not "mobile first"3. difficult to implement "pull to refresh"4. we already have touch events 226. 1. performance issues (hit-testing)2. unified event model not "mobile first"3. difficult to implement "pull to refresh"4. we already have touch events5. Apple won't implement them... 227. Issue 404128: Meta: Extend TouchEvent API to have the power of PointerEvents... 228. W3C Web Events WG - Touch Events errata 229. W3C Touch Events Extensions WG Note 230. HTML5 Rocks: Precision Touch for Precise Gestures 231. Bug 133180 - Consider exposing fractional Touch co-ordinates 232. interface Touch {readonly attribute long identifier;readonly attribute EventTarget target;readonly attribute long float screenX;readonly attribute long float screenY;readonly attribute long float clientX;readonly attribute long float clientY;readonly attribute long float pageX;readonly attribute long float pageY;}; 233. MSDN IEBlog: The Mobile Web should just work for everyoneWindows Phone 8.1 Update now supports Pointer Events and Touch Events 234. Windows Dev Center: Get the Windows Phone Developer Preview 235. patrickhlauke.github.io/touch/tests/event-listener.html 236. events fired on tapmousemove* > pointerover > mouseover >pointerenter > mouseenter > pointerdown >touchstart >mousedown > gotpointercapture > focus >pointermove > touchmove > mousemove >pointerup >touchend >mouseup > lostpointercapture > pointerout > mouseout >pointerleave > mouseleave >clickIE11/Windows Phone 8.1u1with frankensteined Pointer/Touch Events support(but not on desktop) 237. MSDN IEBlog: Making the web just work with any input: Mouse, Touch, and Pointer Events 238. W3C Touch Events WG mailing listJacob Rossi - Enabling Touch Events everywhere 239. polyfills for pointer events(code for tomorrow, today) 240. HandJS 241. patrickhlauke.github.io/touch/handjs/listener/event-listener.html 242. patrickhlauke.github.io/touch/handjs/listener/event-listener.html 243. www.catuhe.com/msdn/handjs/ 244. Polymer 245. GitHub - Polymer/PointerEvents 246. /* Polymer's PointerEvents are not fired unlessan element has a (custom) touch-action attribute */

247. GitHub - Polymer/PointerEvents deprecated 248. GitHub - IE-Touch polyfill 249. utility libraries(because life is too short to hand-code gesture support) 250. Hammer.js 251. Hammer.js 252. /* Hammer's high-level events example */var element = document.getElementById('test_el');var hammertime = new Hammer(element);hammertime.on("swipe",function(event) {/* handle horizontal swipes */}); 253. patrickhlauke.github.io/touch/swipe 254. patrickhlauke.github.io/touch/hammer/swipe(but currently broken in IE?) 255. jQuery Mobile? Sencha Touch?check for support of IE10+and this is a touch deviceassumptions 256. debugging/testing 257. Chrome DevTools / Using the Console / Monitoring events 258. chrome://flags/#touch-events 259. beware inaccurate emulation 260. Issue 181204: [...] event order different from real devicesFixed in Chrome (Canary) 37 261. Bug 920956 - DevTools touch emulation: suppress regular mouse events ... 262. beware inaccurateimplementation 263. Bug 861876 - [...] multiple mousemoves being fired 264. Bug 861876 - [...] preventDefault on touchstart doesn't stop synthetic mouse events 265. bonus material 266. Leap Motion Controller 267. YouTube: Leap Motion Controller trackerpatrickhlauke.github.io/touch/leapmotion/tracker 268. W3C Gamepad APIHTML5 Rocks: Gamepad API tester 269. IndieUI: Events 1.0 - Events for User Interface Independence 270. further reading... 271. Matt Gaunt Touch Feedback for Mobile Sites Jonathan Stark FastActive Stephen Woods HTML5 Touch Interfaces Chris Wilson + Paul Kinlan Touch And Mouse: Together Again ForThe First Time Ryan Fioravanti Creating Fast Buttons for Mobile Web Applications Boris Smus Multi-touch Web Development Boris Smus Generalized input on the cross-device web Boris Smus Interactive touch laptop experiments 272. Rick Byers + Boris Smus (Google I/O) Point, Click, Tap, Touch -Building Multi-Device Web Interfaces Grant Goodale Touch Events W3C Touch Events Extensions Mozilla Developer Network Touch Events WebPlatform.org Pointer Events Rick Byers The best way to avoid the dreaded 300ms click delay isto disable double-tap zoom Chromium Issue 152149: All touch-event related APIs should exist iftouch support is enabled at runtime 273. Tim Kadlec Avoiding the 300ms Click Delay, Accessibly Microsoft Pointer events updates (differences between IE10-IE11) Patrick H. Lauke Webseiten zum Anfassen Patrick H. Lauke Drei unter einem Dach: Pointer-Events fr Maus,Stylus und Touchscreen Patrick H. Lauke Make your site work on touch devices Stu Cox You can't detect a touchscreen Tilo Mitra The State of Gestures Microsoft Hover touch support (IE10/IE11) W3C Media Queries Level 4 pointer 274. Stu Cox The Good & Bad of Level 4 Media Queries Peter-Paul Koch Touch table Peter-Paul Koch Preventing the touch default Peter-Paul Koch Mouse event bubbling in iOS Edge Conference (Feb 2013 London) Panel: Input Edge Conference (Mar 2014 London) Panel: Pointers andInteractions Trent Walton Device-Agnostic Stu Cox The Golden Pattern for Handling Touch Input Matt Gaunt Focusing on the Web Today 275. Mobiscroll Working with touch events Vivian Cromwell A More Compatible, Smoother Touch Peter-Paul Koch The iOS event cascade and innerHTML Patrick H. Lauke Make your site work on touch devices Scott Jehl (Filament Group) Tappy: A custom tap event handler Yehuda Katz Touch events on the web are fundamentallyunfinished ... Andrea Giammarchi PointerEvents No More Google Developers Web Fundamentals: Stateful Elements Respondto Touch 276. youtube.com/watch?v=AZKpByV5764 277. get in touch@patrick_h_laukegithub.com/patrickhlauke/touchpatrickhlauke.github.io/getting-touchy-presentationslideshare.net/reduxpaciellogroup.comsplintered.co.uk