Share via


Pointer events updates

Pointer events are events and related interfaces that handle hardware agnostic pointer input from devices like a mouse, pen, or touchscreen. Since its premier in Internet Explorer 10, Pointer events has become a World Wide Web Consortium (W3C) specification, thanks to the feedback and support from other browser vendors and the web standards community.

To comply with the Candidate Recommendation of the W3C Pointer Events specification, the Internet Explorer 11 implementation has changed slightly from that of Internet Explorer 10.

MS vendor prefix removal

Because the W3C Pointer Events specification wasn't complete when Internet Explorer 10 was released, vendor prefixes were used for the Pointer Events implementation. Since then, the specification has reached Candidate Recommendation status, and the MS vendor prefix versions of the APIs have been deprecated in favor of the non-prefixed signatures defined in the spec. As of IE11, the Microsoft prefixed versions of pointer events APIs are no longer supported and have been completely removed from the EdgeHTML in Microsoft Edge.

Deprecated API Replacement API
MSPointerDown event pointerdown event
MSPointerUp event pointerup event
MSPointerCancel event pointercancel event
MSPointerMove event pointermove event
MSPointerOver event pointerover event
MSPointerOut event pointerout event
MSPointerEnter event pointerenter event
MSPointerLeave event pointerleave event
MSGotPointerCapture event gotpointercapture event
MSLostPointerCapture event lostpointercapture event
-ms-touch-action CSS property touch-action CSS property
element.style.msTouchAction property element.style.touchAction property
onmspointer* attributes onpointer* attributes
element.msSetPointerCapture() method element.setPointerCapture() method
element.msReleasePointerCapture() method element.releasePointerCapture() method
msMaxTouchPoints maxTouchPoints

 

If your code uses pointer events and you need to maintain compatibility with Internet Explorer 10, you can use the following fallback pattern:

if(window.PointerEvent) {
    elm.addEventListener("pointerdown", foo);
} else if (window.MSPointerEvent) {
    elm.addEventListener("MSPointerDown", foo);
} else {
    elm.addEventListener("mousedown", foo);
}

Behavioral updates

The technical details of the W3C pointer events specification have changed. The IE11 implementation of pointer events has the following behavioral changes from the original implementation in Internet Explorer 10.

Pointer events area Internet Explorer 10 IE11
pointerenter pointerleave Not supported Supported
PointerEvent.button PointerEvent.buttons Pen eraser button not supported Supports pen eraser button
PointerEvent.pressure Always returns a value of 0 on hardware that doesn't support pressure Returns a value of 0.5 for active contact (such as mouse button push) and 0 otherwise on hardware that doesn't support pressure
PointerEvent.height PointerEvent.width Return values in screen pixels Return values in CSS document pixels
click contextmenu dblclick Dispatches MouseEvent Dispatches PointerEvent (inherits from MouseEvent)
PointerEvent.pointerType Returns integer value Returns string value
releasePointerCapture When called on an element, releases capture for the specified pointer from whichever element currently has capture Only releases pointer if calling element already has capture (using setPointerCapture)
MSPointerHover Supported (fires when a pen moves over an element without touching the surface) Not supported (doesn't fire). Use pointermove and inspect the event.buttons property to determine if the pointer is hovering. Other hover behaviors, like CSS :hover, are still applied.
pointermove For pen, fires only when touching the surface (when not hovering) Fires for all pen movement (regardless if its hovering or not)
pointerEnabled Supported with vendor prefix (msPointerEnabled) Supported without prefix (pointerEnabled), but deprecated in favor of using window.PointerEvent interface for feature detection.