Features for adaptive input handling

The pointer event model in Internet Explorer 10 allows you to gracefully handle all mouse, pen, touch, and multi-touch input by writing to a single set of events. Similar to mouse events, pointer events fire on down, move, up, over, and out for each pointer. Basic touch support for most sites should "just work" with no changes required due to a couple reasons:

• Internet Explorer 10 provides common default handling for basic touch interactions, such as panning for scrollable regions, double-tap and pinch zooming, touch selection, and press-and-hold context menus. These features work automatically so that sites and apps have a great touch experience by default.
• After firing pointer events, Internet Explorer 10 fires mouse events for the primary contact (for example, the first finger on the screen). This enables existing websites that are based on mouse events to continue to function.

For basic touch-friendly design strategies and troubleshooting, check out Quickstart: Make your site touch-ready. When you're ready to optimize your site for touch while still providing seamless mouse and keyboard support, Internet Explorer 10 provides the features for adaptive input handling described in this article.

• Detecting touch
• Simulating mouse hover for touch
• Specifying and overriding touch behaviors
• Pointer events model
• Gesture events model
• Touch-friendly HTML5 Forms
• Related topics

Detecting touch

Internet Explorer 10 provides the msMaxTouchPoints property to check for touch and multi-touch hardware support from the client side:

if (navigator.msMaxTouchPoints > 1) {
  // Supports multi-touch
}

To detect touch capability from the server side, Internet Explorer 10 provides the user-agent string "Touch" token. After touch support is confirmed, you can check the pointerType of the MSPointerDown event to detect when your user is using touch:

element.addEventListener("MSPointerDown",handleDown,false);
function handleDown(event) {
  if(event.pointerType == event.MSPOINTER_TYPE_TOUCH) {
    // Do something for touch input only
  }else{
    // Do something for non-touch input
  }
}

Simulating mouse hover for touch

With touch-based browsing, there is no equivalent to hovering the cursor over a webpage element. Therefore, any actions or content that are activated by hovering are potentially inaccessible to touch-based users. A common scenario with this problem is hover-activated submenus. The best practice for avoiding this problem is to not use hover to hide content that a user can interact with. Instead, consider using the onclick event to toggle the visibility. Alternatively, Internet Explorer 10 adds new behavior to the existing aria-haspopup property to simulate hover on page elements with hidden interactive content:

<style type="text/css">
#menu .cssSubMenu {
  display: none;
}
#menu:hover .cssSubMenu {
  display: block;
}
</style>

...
<div id="menu" aria-haspopup="true">
  <a>CSS Hover Menu</a>
    <div aria-haspopup="false" class="cssSubMenu">
      <a>Sub menu item 1</a> </div>
    <div aria-haspopup="false" class="cssSubMenu">
      <a>Sub menu item 2</a> </div>
    <div aria-haspopup="false" class="cssSubMenu">
      <a class="cssSubLink">Sub menu item 3</a> </div>
</div>

For more info, see Using aria-haspopup to simulate hover on touch-enabled devices.

Specifying and overriding touch behaviors

By default, Internet Explorer 10 consumes touch moves, pinches, and double-taps and doesn't send events for these interactions. You can use the -ms-touch-action Cascading Style Sheets (CSS) property to override these defaults and specify the allowable touch action behaviors for your site. The following table describes the possible values.

For fine-grain control of touch-enabled element zooming and panning/scrolling, there are a number of new properties that enable you to do things like set zoom and scroll limits, set zooming and scrolling snap points, and lock the axis of panning motion or allow for free-form panning. And for controlling which elements are selectable on the page, you can use -ms-user-select, which works the same for all input types.

Pointer events model

Internet Explorer 10 provides a pointer events model that enables you to easily handle all mouse, pen, touch, and multi-touch input in an abstracted form called a pointer. The events for capturing generic pointer input and the properties of those events look a lot like the ones you're used to for mouse (such as down, move, up, over, and out), with extra goodness for other forms of input and multiple pointers added in. For suggestions on handling multi-touch and mouse input in other browsers, check out the IEBlog.

Gesture events model

For building more advanced touch experiences, Internet Explorer 10 provides the gesture events model, which enables you to handle more complex user interactions.

Touch-friendly HTML5 Forms

Internet Explorer 10 introduces support for HTML5 input controls, all of which are touch optimized. Here are just a few of the touch enhancements:

• Select control carousels through all options, allowing continuous scrolling
• Text input boxes provide a clear-all button
• Scrollable sub areas of the page work with touch
• Range control provides continuous feedback of the selected value
• Buttons and links allow for canceling a click with touch by moving off the target
• Radio buttons and check boxes are easy to target with touch, and touching their labels activates them as well
• Tooltips are larger and placed further away when you touch a link than when you use a mouse

For text input, you can further improve your users' touch experiences by identifying specific input types such as email, telephone, or URL—Internet Explorer 10 will show a tailored touch keyboard layout for that input type on Windows 8.

Related topics

Design adaptive websites

Features for adaptive layout

Send comments about this topic to Microsoft

Build date: 9/24/2013