Architecture Note: IE10 Pointer Events for Unified Input Handling

Requirements

The goal is to handle mouse, touch, and pen input with a single event model in a web application that must run in Internet Explorer 10 (IE10). The application needs to:

• Receive unified pointer events (down, move, up, over, out, cancel).
• Distinguish input type (mouse, touch, pen) and access pressure, tilt, width/height when available.
• Control default touch behaviors (e.g., pan-zo) to avoid double-tap delays.
• Retain pointer ownership during drag-and-drop or drawing gestures even if the pointer leaves the target element.

Smallest Suitable Design

The minimal design relies on the W3C Pointer Events API as implemented in IE10, with a fallback to legacy mouse/touch events for older browsers. The core steps are:

1. Feature-detect window.PointerEvent.
2. If detected, register listeners for pointerdown, pointermove, pointerup, pointercancel on the target element.
3. If not detected, fall back to mousedown/mousemove/mouseup and touchstart/touchmove/touchend listeners.
4. Use CSS touch-action: none on the element to suppress default pan-zo and enable continuous pointermove during a drag.
5. Call element.setPointerCapture(event.pointerId) in the pointerdown handler to retain ownership; call releasePointerCapture on pointerup or pointercancel.

Trust/Data Boundaries

All processing occurs in the browser's rendering engine; no data is sent to a server as part of the pointer-event handling. The only trust boundary is between the web page and the browser: the page must not assume that pointer-event properties such as pressure or tiltX/Y are always present. Code must treat missing or zero values as valid for mouse input.

Operational Checks

To verify the design works as intended:

• Open the test page in IE10.
• Open the developer console (F12 → Console).
• Perform a mouse click, a touch tap, and a pen tap on the target element.
• Confirm that the logged event.pointerType values are \"mouse\", \"touch\", and \"pen\" respectively.
• While dragging, verify that pointermove events continue even when the cursor leaves the element (indicating successful capture).
• Check that applying touch-action: none prevents the default pan-zo gesture (no page scroll or zoom during the drag).

Failure Modes

If any of the following occurs, the design degrades gracefully:

• Missing PointerEvent support: The feature detection falls back to mouse/touch listeners; multi-touch gestures that rely on pointer IDs are lost, but basic click/drag still works.
• Unavailable pressure/tilt: For mouse input these properties are zero; the application should ignore them or treat them as "no pressure".
• Incorrect touch-action: If the CSS rule is omitted or overridden, the browser may intercept the gesture, causing delayed pointermove events or unwanted scrolling.
• Capture not released: Forgetting to call releasePointerCapture can lock the pointer, preventing interaction with other page elements until the page is refreshed.

Conditions That Would Change the Design

The current design would be revisited if:

• The product must support IE9 or earlier, where Pointer Events are unavailable and the fallback would need to handle more complex multi-touch logic.
• New input modalities (e.g., pressure-sensitive stylus with additional axes) appear that are not expressed in the Pointer Events spec, requiring vendor-specific extensions.
• The application targets browsers that have deprecated Pointer Events in favor of the newer Pointer Events Level 2 or the Composite Pointer Events model, necessitating a migration path.
• Performance profiling shows that the capture/release overhead impacts frame rate on low-end devices, prompting a switch to passive event listeners with manual hit-testing.

Practical Example

The following snippet shows the minimal implementation. Place it in a script block on the page or in an external .js file.

// feature detection
if (window.PointerEvent) {
  // use Pointer Events
  var target = document.getElementById('canvas');
  target.addEventListener('pointerdown', function (e) {
    console.log('pointerdown', e.pointerType);
    // suppress default touch behavior
    target.style.touchAction = 'none';
    // retain pointer
    target.setPointerCapture(e.pointerId);
  });
  target.addEventListener('pointermove', function (e) {
    console.log('pointermove', e.pointerType, e.pressure, e.tiltX, e.tiltY);
    // custom drag/draw logic here
  });
  target.addEventListener('pointerup', function (e) {
    console.log('pointerup', e.pointerType);
    target.releasePointerCapture(e.pointerId);
    target.style.touchAction = ''; // reset
  });
  target.addEventListener('pointercancel', function (e) {
    console.log('pointercancel', e.pointerType);
    target.releasePointerCapture(e.pointerId);
    target.style.touchAction = '';
  });
} else {
  // fallback to mouse/touch
  var target = document.getElementById('canvas');
  target.addEventListener('mousedown', start);
  target.addEventListener('mousemove', move);
  target.addEventListener('mouseup', end);
  target.addEventListener('mouseleave', end);
  target.addEventListener('touchstart', start);
  target.addEventListener('touchmove', move);
  target.addEventListener('touchend', end);
  function start(e) {
    if (e.type === 'touchstart') e = e.changedTouches[0];
    console.log('start', e.type);
    target.setCapture ? target.setCapture() : null;
  }
  function move(e) {
    if (e.type === 'touchmove') e = e.changedTouches[0];
    console.log('move', e.clientX, e.clientY);
  }
  function end(e) {
    if (e.type === 'touchend') e = e.changedTouches[0];
    console.log('end', e.type);
    target.releaseCapture ? target.releaseCapture() : null;
  }
}

To check the result, load the page in IE10, open the console, and interact with the element. You should see logs indicating the pointer type and, for move events, pressure/tilt values (zero for mouse). If the fallback path executes, you will see only mouse/touch logs and no pressure/tilt data.