Unifying touch, mouse and keyboard events with IE10

Now that Internet Explorer 10 is available for both Windows 7 and Windows 8, many developers are starting to think about how to best support touch based input on their web pages. Surely, any Windows based device supporting touch will convert a touch on the screen to a mouse button click on that particular spot. So, even if you don't do anything, your web page will "just work".

Now, touch support is much more than just waiting for somebody to touch the screen or click the mouse. For instance, if you wanted to implement a zoom function, or support multi-touch events in your HTML web application, you want to ramp up your JavaScript code and CSS styles a little.

Shortly put, Microsoft does support a new CSS custom style called "-ms-touch-action", which controls how IE10 will redirect touch-based events to your regular event listeners. Say, you had a DIV element on your HTML5 page, and were executing the following JavaScript code:

var myDiv = document.getElementById("myDivId");
myDiv.addEventListener("mousemove", myEventHandlerFunction, false);

With this standard HTML5 code, you can support touch events for free, meaning that the browser/OS combination will convert touch events to mouse move events. But, if you wanted better touch support in IE10, you could enable a special CSS style for your div element:

#myDivId
{
  -ms-touch-action: none;
}

Now, the setting of "none" for the "-ms-touch-action" style will disable zooming and page panning for that particular div element. Now, you'd need to change your JavaScript code a little, that is, the event name you listen to:

myDiv.addEventListener("MSPointerMove", myEventHandlerFunction, false);

And after this change in both the CSS styles and the JavaScript code, you suddenly have multi-touch based support inside your web application!

Sounds great, indeed. Of course later on, these touch events will get standardized and work across all browsers, but this time isn't just yet. In the meantime, you can work with IE10 as above.

For more information, check out this blog post on MSDN.