Pointer Events

What is it?

Pointer events is a new standard developed by the W3C to define a unified device input model – pen, mouse and touch – across multiple browsers. Microsoft contributed the initial specification to W3C.

Pointer Events makes it easier to support a variety of browsers and devices by saving Web developers from writing unique code for each input type. The specification has earned positive feedback from the developer community -- many are already embracing it as a unified model for cross-browser multi-modal input, including jQuery and Dojo frameworks.

On this page you will find info on the standardization process, resources, examples and demos of Pointer Events in action.

Demo

To start with, here is a little demo. In the canvas below, we are drawing squares when the event pointerMove is triggered. Squares are blue when the event is triggered by the mouse, red when trigged by touch and green when triggered by pen. if you are running internet Explorer 10 or 11, you can try this out now. If you are running another browser (the others are coming! read below), you can still check out the script code.


Working with the Web community

To demonstrate cross browser interoperability for Pointer Events, MS Open Tech is contributing patches to Blink and Mozilla browser engines, and developed interoperability prototypes, including a Pointer Events prototype for WebKit on HTML5 Labs. As a result of this work,  you can start testing your Pointer Events enabled website on one of the below:

Internet Explorer 10: prefixed
Internet Explorer 11: un-prefixed
WebKit: Work in progress, prototype implementation by MS Open Tech
Blink: Work in progress, Touch-Action CSS property checked in allowing the use of Pointer Events with a Polyfill
Gecko: Work in progress, Firefox Metro 100% test pass, integration into all Gecko based platforms on the way

When a technology such as Pointer Events emerges, developers are eager to start using it even though not all browsers support it yet. That's why they develop polyfills, offering some level of support. You can find some polyfills for pointer Events out there such as the jQuery polyfill or Hand.js that will allow you to start migrating your code from mouse or touch to Pointer Events immediately.

Resources

As we continue to work with the vibrant Web community, we look forward to seeing even more Pointer Events support across a growing number of JavaScript libraries and frameworks – there’s more to come! To learn more about using and implementing Pointer Events, feel free to check out and contribute to the Pointer Events Wiki on Web Platform Docs which includes community generated polyfills, tests, demos, and tutorials, or join the discussion at #PointerEvents. Point. Click. Touch.

Pointer Events Specification
Pointer Events Wiki 
Another great article on Pointer Events

Examples of sites delivering advanced Pointer Events experiences

If you are running a Pointer Events enabled browser (as of right now, Internet Explorer 10 or Internet Explorer 11), you can start playing with some of the sites listed below that offer a great immersive Touch, Mouse and Pen experience.

Flipboard

Flipboard - An interactive Web magazine experience that has an awesome touch and mouse support powered by Pointer Events. Use Flipboard to read and collect the news you care about, and curate your favorite stories into your own magazines on any topic imaginable, can be shared and enjoyed on the Web by anyone, anywhere.

Everest

Everest: Rivers of Ice - Interactive Web experience of Mount Everest and the Himalayas - the site showcases what modern browser technology can do, especially the W3C Pointer Events API for touch screens.

Contrejour

Contrejour - The Web-based version of Contre Jour, with the same look, feel, and performance of the native app, complete with 10 levels exclusively for modern HTML5 browsers that support multi-touch input - Behind the Scenes.

ThievesofthiefThief of Thieves: Experience - Website based on Robert Kirkman’s ‘Thief of Thieves’ lets users become virtual thieves themselves as they learn skills and finally take part in their own crime caper. The design of the site uses the Pointer Events specification that supports touch- and mouse-based input, including full multi-touch capabilities and HTML5 support - Behind the Scenes.

AtariArcadeAtari Arcade - Atari Arcade is among the most demanding game development projects because it requires full multi-touch, multi-player support across many modern browsers and devices - Behind the Scenes.

[updates]

[/updates]

Tutorials

Sorry there are no related tutorials available