Pointer Events

Pointer Event polyfill.

Supported Browsers

• Chrome
• Firefox
• Safari
• IE9+
• Legacy IE (IE8 and below) with jQuery

Disclaimer

This is not a 1-for-1 polyfill for the PointerEvents API.

• The touch-action CSS attribute is not supported (uses attribute instead).
• The gotpointercapture and lostpointercapture events are not supported.

Use

element.addEventListener('pointerdown', onDownHandler, false);
element.addEventListener('pointermove', onMoveHandler, false);
element.addEventListener('pointerup', onUpHandler, false);

Touch Action

The touch-action CSS property is not supported with this polyfill. I wanted this polyfill to be lightweight, and loading and parsing CSS files has too much overhead. Instead, this polyfill uses an attribute: touch-action.

<div touch-action="none"></div>

If a pointermove event is dispatched from an element (or a child element of) that has the touch-action attribute with a value of none, the browser default browser behavior (scrolling) will be prevented.

Legacy IE

Legacy IE browsers (IE8 and below) do not support the native pointer event polyfill. However, it does support the polyfill through jQuery.

Instead of creating and dispatching the custom Pointer Events through the native DOM api (which doesn't support custom events in legacy IE), jQuery is used to create and dispatch the pointer events. This requires all event handlers be bound through jQuery.

$element
    .on('pointerdown', onDownHandler)
    .on('pointermove', onMoveHandler)
    .on('pointerup', onUpHandler);