IE10 Pointer Events: Unified Touch, Pen, and Mouse Handling

Requirements

The goal is to handle input from touch, pen, and mouse devices in Internet Explorer 10 using a single event model, thereby reducing duplicated listeners and simplifying state‑management code. The solution must work only in IE10 (or later IE versions that retain the -ms‑prefix) and must degrade gracefully in browsers that lack native Pointer Events.

Smallest Suitable Design

Adopt the IE10‑specific Pointer Events API, which consolidates the mouse, touch, and pen event sets into MSPointerDown, MSPointerMove, MSPointerUp, and (when available) MSPointerCancel. Feature‑detect the API by checking for the presence of the constructor window.MSPointerEvent. When the test succeeds, attach a single set of listeners; otherwise fall back to separate mouse and touch listeners.

Feature‑detection snippet

var supportsPointerEvents = !!window.MSPointerEvent;
if (supportsPointerEvents) {
  element.addEventListener('MSPointerDown', onPointerDown, false);
  element.addEventListener('MSPointerMove', onPointerMove, false);
  element.addEventListener('MSPointerUp',   onPointerUp,   false);
  /* MSPointerCancel may not fire in IE10; keep as a safety net */
  element.addEventListener('MSPointerCancel', onPointerCancel, false);
} else {
  /* mouse fallback */
  element.addEventListener('mousedown', onMouseDown, false);
  element.addEventListener('mousemove', onMouseMove, false);
  element.addEventListener('mouseup',   onMouseUp,   false);
  /* touch fallback */
  element.addEventListener('touchstart', onTouchStart, false);
  element.addEventListener('touchmove',  onTouchMove,  false);
  element.addEventListener('touchend',   onTouchEnd,   false);
}

Trust/Data Boundaries

Pointer Events expose properties that originate from the hardware and the browser’s input subsystem: pointerId (a unique identifier for each active contact), pointerType (string values 'touch', 'pen', or 'mouse'), pressure (0‑1 range, default 0 when not reported), tiltX and tiltY (degrees, default 0), and width/height (contact geometry). The application should treat these values as trustworthy only insofar as the browser correctly reports them; it must not assume non‑zero pressure or tilt on devices that lack those sensors. Missing data appears as the default zero, which is safe to use for basic hit‑testing.

Operational Checks

After listeners are attached, verify that the correct pointerType strings appear for each input modality. Perform the following steps in IE10:

1. Open IE10, press F12 to open Developer Tools, select the Console tab.
2. Run !!window.MSPointerEvent; it should return true.
3. Add a temporary listener: document.body.addEventListener('MSPointerDown', function(e){ console.log(e.pointerType); });
4. Interact with the page using a mouse, a touchscreen (if present), and a pen. The console should log 'mouse', 'touch', or 'pen' respectively.

Additionally, test the CSS -ms-touch-action property to suppress default panning while still receiving Pointer Events:

#interactive {
  -ms-touch-action: none; /* IE10 prefix */
  touch-action: none;     /* standard for future browsers */
}

Failure Modes

• Missing prefix support in newer browsers: If the code runs in IE11+, Edge, Chrome, or Firefox, the detection (!!window.MSPointerEvent) will be false, causing the fallback mouse/touch listeners to be used. If the site also adds unprefixed PointerEvent listeners elsewhere, duplicated handling may occur.
• Stale active pointers: IE10 does not guarantee firing of MSPointerCancel in all scenarios (e.g., when the user switches applications abruptly). Relying solely on MSPointerCancel for cleanup can leave stale entries in an active‑pointer map, leading to incorrect hit‑testing or drift.
• Incorrect touch‑action interaction: Applying -ms-touch-action: none to an element that also has layout constraints (e.g., position: fixed with top: 0) can unintentionally disable scrolling on parent elements, breaking expected page navigation.

Conditions That Would Change the Design

1. The target audience shifts to browsers that support the unprefixed PointerEvent interface (IE11+, Edge, Chrome, Firefox). Detection logic would then be updated to check for window.PointerEvent and use unprefixed event names (pointerdown, pointermove, etc.).
2. A reliable, lightweight polyfill (e.g., PEPS) is adopted across the codebase, allowing developers to write against the standard Pointer Events interface and rely on the polyfill for older browsers, removing the need for browser‑specific branching.
3. New input modalities (e.g., pressure‑sensitive touch with non‑zero pressure reporting) become prevalent and the application requires richer data than IE10 provides. In that case, moving to a newer browser version or a cross‑browser abstraction library would be necessary.

Practical Example: Simple Drawing Canvas

The following code demonstrates a minimal drawing surface that works with mouse, touch, or pen in IE10 using Pointer Events. It tracks the active pointer, draws lines on a <canvas>, and cleans up on MSPointerUp (the reliable cleanup event).

var canvas = document.getElementById('drawCanvas');
var ctx = canvas.getContext('2d');
var activePoints = {}; // pointerId -> {x, y}

function getPoint(e) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: e.clientX - rect.left,
    y: e.clientY - rect.top
  };
}

function onPointerDown(e) {
  var pt = getPoint(e);
  activePoints[e.pointerId] = pt;
  ctx.beginPath();
  ctx.moveTo(pt.x, pt.y);
}

function onPointerMove(e) {
  var pt = activePoints[e.pointerId];
  if (!pt) return; // ignore unknown pointers
  var cur = getPoint(e);
  ctx.lineTo(cur.x, cur.y);
  ctx.stroke();
  activePoints[e.pointerId] = cur; // update last position
}

function onPointerUp(e) {
  delete activePoints[e.pointerId];
}

function onPointerCancel(e) {
  /* IE10 may not fire this; kept as a safety net */
  delete activePoints[e.pointerId];
}

if (!!window.MSPointerEvent) {
  canvas.addEventListener('MSPointerDown', onPointerDown);
  canvas.addEventListener('MSPointerMove', onPointerMove);
  canvas.addEventListener('MSPointerUp',   onPointerUp);
  canvas.addEventListener('MSPointerCancel', onPointerCancel);
} else {
  /* mouse/touch fallback as shown earlier */
}

To verify the drawing works:

1. Load the page in IE10.
2. Draw with a mouse; lines should appear.
3. If a touchscreen is present, draw with a finger; the same behavior should occur.
4. Open the console and confirm that e.pointerType logs the appropriate string for each interaction.

Limitations: pressure and tilt values will be zero on most touchscreens; the application should not rely on them for critical logic. If the browser loses pointer capture (e.g., due to a system gesture), the MSPointerCancel event may not fire, so the cleanup in onPointerUp is essential to prevent stale entries.