JSConf EU - Tim Park - Pointing forward to Pointer Events
description
Transcript of JSConf EU - Tim Park - Pointing forward to Pointer Events
![Page 1: JSConf EU - Tim Park - Pointing forward to Pointer Events](https://reader035.fdocuments.us/reader035/viewer/2022081602/5564d9cdd8b42ad9498b5169/html5/thumbnails/1.jpg)
Pointing ForwardTim Park
@timpark
Microsoft
![Page 2: JSConf EU - Tim Park - Pointing forward to Pointer Events](https://reader035.fdocuments.us/reader035/viewer/2022081602/5564d9cdd8b42ad9498b5169/html5/thumbnails/2.jpg)
![Page 3: JSConf EU - Tim Park - Pointing forward to Pointer Events](https://reader035.fdocuments.us/reader035/viewer/2022081602/5564d9cdd8b42ad9498b5169/html5/thumbnails/3.jpg)
Some patterns stop working
Don’t
Use
It
Hover
![Page 4: JSConf EU - Tim Park - Pointing forward to Pointer Events](https://reader035.fdocuments.us/reader035/viewer/2022081602/5564d9cdd8b42ad9498b5169/html5/thumbnails/4.jpg)
Rethink target sizing
![Page 5: JSConf EU - Tim Park - Pointing forward to Pointer Events](https://reader035.fdocuments.us/reader035/viewer/2022081602/5564d9cdd8b42ad9498b5169/html5/thumbnails/5.jpg)
Rethink target positioning
![Page 6: JSConf EU - Tim Park - Pointing forward to Pointer Events](https://reader035.fdocuments.us/reader035/viewer/2022081602/5564d9cdd8b42ad9498b5169/html5/thumbnails/6.jpg)
Designing for touch
Interaction areas Reading areas
![Page 7: JSConf EU - Tim Park - Pointing forward to Pointer Events](https://reader035.fdocuments.us/reader035/viewer/2022081602/5564d9cdd8b42ad9498b5169/html5/thumbnails/7.jpg)
![Page 8: JSConf EU - Tim Park - Pointing forward to Pointer Events](https://reader035.fdocuments.us/reader035/viewer/2022081602/5564d9cdd8b42ad9498b5169/html5/thumbnails/8.jpg)
W3C Proposal: Pointer Events• http://www.w3.org/TR/pointerevents/• Joint Proposal with Mozilla• Goals• Unified model for multiple input types• Ability to identify different input types• Expose attributes to take advantage of input types
• Moved from First Public Working Draft to Candidate Recommendation in 5 months.
![Page 9: JSConf EU - Tim Park - Pointing forward to Pointer Events](https://reader035.fdocuments.us/reader035/viewer/2022081602/5564d9cdd8b42ad9498b5169/html5/thumbnails/9.jpg)
Pointer Events: An Evolutionmousedownmouseup
mousemovemouseovermouseoutmouseentermouseleave
pointerdownpointeruppointercancelpointermovepointeroverpointeroutpointerenterpointerleave
![Page 10: JSConf EU - Tim Park - Pointing forward to Pointer Events](https://reader035.fdocuments.us/reader035/viewer/2022081602/5564d9cdd8b42ad9498b5169/html5/thumbnails/10.jpg)
Pointer Events: Attributes
...beyond existing button, clientX, clientY in mouse events.
• width • height• pressure• tilt• pointerType• pointerId
Pointer Events expand the set of attributes available…
![Page 11: JSConf EU - Tim Park - Pointing forward to Pointer Events](https://reader035.fdocuments.us/reader035/viewer/2022081602/5564d9cdd8b42ad9498b5169/html5/thumbnails/11.jpg)
Attributes: width and heightPointing devices often have a real world physical contact size.
![Page 12: JSConf EU - Tim Park - Pointing forward to Pointer Events](https://reader035.fdocuments.us/reader035/viewer/2022081602/5564d9cdd8b42ad9498b5169/html5/thumbnails/12.jpg)
Attributes: pressure, tiltX, tiltYPressure and tilt enable rich, real world interactions.
![Page 13: JSConf EU - Tim Park - Pointing forward to Pointer Events](https://reader035.fdocuments.us/reader035/viewer/2022081602/5564d9cdd8b42ad9498b5169/html5/thumbnails/13.jpg)
Attributes: pointerType, pointerIdpointerType: Which type of pointing device.
pointerId: Which instance of a pointing device.
![Page 14: JSConf EU - Tim Park - Pointing forward to Pointer Events](https://reader035.fdocuments.us/reader035/viewer/2022081602/5564d9cdd8b42ad9498b5169/html5/thumbnails/14.jpg)
Demo: Pointer Events(Available at: http://github.com/timfpark/PointerPaint)
![Page 15: JSConf EU - Tim Park - Pointing forward to Pointer Events](https://reader035.fdocuments.us/reader035/viewer/2022081602/5564d9cdd8b42ad9498b5169/html5/thumbnails/15.jpg)
Pointer Events: Getting Started• IE10 has vendor prefixed support• IE11 has unprefixed support.• Chromium WebKit prototype at http://aka.ms/pointium
• Polyfills Available• Hand.js: http://handjs.codeplex.com• Points.js: http://github.com/Rich-Harris/Points
![Page 16: JSConf EU - Tim Park - Pointing forward to Pointer Events](https://reader035.fdocuments.us/reader035/viewer/2022081602/5564d9cdd8b42ad9498b5169/html5/thumbnails/16.jpg)
Thanks!Tim Park
@timpark
Microsoft