Touch Input for IE10 and Metro style Apps

The Web is more interactive, fun, and immersive when sites work well with new input devices and touch screens. The Windows Developer Preview introduces support for handling touch and pen input in your sites and apps. Developers can now ensure their sites work well with touch and build powerful new experiences that make the most of advanced input such as multi-touch and gestures. You can see this in action on the IE Test Drive site in the new and updated demos Touch Effects, Lasso Birds, and Flying Images.

Handling touch-first input without compromising mouse

“Windows 8” Metro style IE and applications bring a first-in-class touch experience to Windows and does so without sacrificing other forms of input. Developers can build sites and apps with that same touch-first experience.

This starts with basic input handling. In IE10 and Metro style apps, developers can write to a more abstract form of input, called a “Pointer.” A Pointer can be any point of contact on the screen made by a mouse cursor, pen, finger, or multiple fingers. This model makes it easy to write sites and apps that work well no matter what hardware the user has. Similar to our approach for hardware acceleration, the experience gets better with better hardware yet the APIs developers write to are hardware agnostic.

Pointer events encapsulate input from touch, pen, and mouse making it easy to build experiences that are hardware independent.
Pointer events encapsulate input from touch, pen, and mouse making it easy to build experiences that are hardware independent.

The events for capturing generic pointer input look a lot like those for mouse: MSPointerDown, MSPointerMove, MSPointerUp, MSPointerOver, MSPointerOut, etc.

Pointer events provide all the usual properties expected in mouse events (client X/Y coordinates, target element, button states, etc.) in addition to new properties for other forms of input: pressure, contact geometry, tilt, etc. So developers can easily write to pointer events and their apps just work no matter what input hardware is being used.

Sometimes, developers do want to provide different experiences for touch input. For that, pointer events also indicate the type of input (touch, pen, or mouse) via the event.pointerType property.

Here’s a primitive paint application slightly modified from that included in the Pointer and gesture events page:

<style>

#drawSurface {

-ms-touch-action: none; /* Disable touch behaviors, like pan and zoom */

}

</style>

 

<canvas id="drawSurface" width="500px" height="500px" style="border: 1px solid black;"></canvas>

 

<script>

var canvas = document.getElementById("drawSurface");

var context = canvas.getContext("2d");

context.fillStyle = "rgba(255, 0, 0, 0.5)";

canvas.addEventListener("MSPointerMove", paint, false);

 

function paint(event) {

context.fillRect(event.offsetX, event.offsetY, 5, 5);

}

</script>

By default, IE10 enables panning and zooming with touch. Sometimes, developers may want to manage panning and zooming in the site itself. In this example, we show how to handle the touch input in your site and not pan/zoom using the style rules overflow:hidden and –ms-content-zooming: none to do exactly that.

Built-in support for multi-touch

Down, moves, and ups fire for each touch contact. So applications like the above paint example support multitouch without any special code. On any pointer event, you can determine the type of device that produced the input:

<style>

#foo {

width: 500px;

height: 500px;

background-color: red;

-ms-touch-action: none; /* Disable touch behaviors, like pan and zoom */

}

</style>

 

<div id="foo"></div>

 

<script>

function handleEvent(event) {

// Change the color of the DIV based on the input device used

switch (event.pointerType) {

case event.MSPOINTER_TYPE_TOUCH:

event.target.style.backgroundColor = "blue"; // A touchscreen was used

break;

case event.MSPOINTER_TYPE_PEN:

event.target.style.backgroundColor = "green"; // A pen was used

break;

case event.MSPOINTER_TYPE_MOUSE:

event.target.style.backgroundColor = "yellow"; // A mouse was used

break;

}

}

 

document.getElementById("foo").addEventListener("MSPointerMove", handleEvent, false);

</script>

Advanced gesture input

The Windows Developer Preview also includes support for recognizing higher level gestures with pointers, such as scaling, panning, and rotating. Developers can easily take advantage of these using the MSGestureStart, MSGestureChange, and MSGestureEnd events. For each of these, information about the transform of the gesture is provided (rotation, scale, translation, etc.) that can be applied to your application in many ways, such as CSS Transforms:

<style>

html {

overflow: hidden;

-ms-content-zooming: none; /* Disable pan/zoom */

}

#foo {

background-color: red;

width: 500px;

height: 500px;

-ms-transform-origin: 50%;

-ms-transform-origin: 50%;

}

</style>

 

<div id="foo"></div>

 

<script>

function handleEvent(event) {

event.target.style.msTransform = "scale(" + event.scale + ")";

}

 

document.getElementById("foo").addEventListener("MSGestureChange", handleEvent, false);

</script>

Feature detection, fallback, and supporting other models

For code that is used across other platforms, IE10 offers simple feature detection for pointer events:

if (window.navigator.msPointerEnabled) {

// the system will fire pointer events

}

Note: in the current Windows Developer Preview, this property indicates the system supports pointer events for touch or pen input. However, at a future date it will be updated to indicate support for pointer events for mouse, pen, and touch.

Using feature detection, it’s possible to make sites that work well across different input models. Lasso Birds is an example that works well across the Windows 8 Developer Preview, Apple iOS, Google Android, and mouse-only systems. On Windows 8, it uses pointer events to handle all input in a single code path. On other platforms, it uses a combination of mouse events and proprietary touch events to deliver a similar experience.

if (window.navigator.msPointerEnabled) {

elm.addEventListener("MSPointerDown", handleInput, false); // Fires for touch, pen, and mouse

} else {

elm.addEventListener("mousedown", handleInput, false); // Fires for mouse only

}

Pointer and gesture events are just one part of our developer model for touch. We'll talk more about our other touch APIs as well as how Lasso Birds works in future posts.

For more details on pointer events, gesture events, and other touch APIs check out the Pointer and gesture events page. We look forward to seeing the touch experiences you build, and welcome your feedback through Connect.

—Jacob Rossi, Program Manager, Internet Explorer

21 Sept 2012 - Updated code samples to reflect changes made in the IE10 RTM. —Ed.