JSConf EU - Tim Park - Pointing forward to Pointer Events

Pointing ForwardTim Park

@timpark

Microsoft

Some patterns stop working

Don’t

Use

It

Hover

Rethink target sizing

Rethink target positioning

Designing for touch

Interaction areas Reading areas

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.

Pointer Events: An Evolutionmousedownmouseup

mousemovemouseovermouseoutmouseentermouseleave

pointerdownpointeruppointercancelpointermovepointeroverpointeroutpointerenterpointerleave

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…

Attributes: width and heightPointing devices often have a real world physical contact size.

Attributes: pressure, tiltX, tiltYPressure and tilt enable rich, real world interactions.

Attributes: pointerType, pointerIdpointerType: Which type of pointing device.

pointerId: Which instance of a pointing device.

Demo: Pointer Events(Available at: http://github.com/timfpark/PointerPaint)

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

Thanks!Tim Park

@timpark

Microsoft