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. |