mfreca
Last Updated: February 25, 2016
·
18.14K
· underlog
1819c3ec331af74ecae0d92a440b8679

IE 11 in Windows 8.1 pointer events changes

In case you have used jQuery and the pointer events in IE 10, you are in for a surprise.
The following code works in IE 10, but does not work in IE 11:

$(document.body).on("MSPointerDown", function(e) { console.log(e) });

Interestingly enough, the following works in both versions:

document.body.addEventListener("MSPointerDown", function(e) { console.log(e); });

The reason: the event type available in the event handler equals MSPointerDown in IE10 and pointerdown in IE 11. This is not compatible with the way jQuery refers event handlers (as far as I debugged it, the problem happens here. ). The event handler is not resolved, and never gets called.

In general I would not consider this a jQuery bug; IE 11 is acting "weird" by allowing binding to one event, while triggering the event handler with a different event type.

What should we do?

The correct approach would be to bind to MSPointerDown in IE10 and to pointerdown in IE 11. The good news: this is very easy to detect; only IE11 has the pointerEnabled feature flag set to true. Both IE10 and IE11 have the msPointerEnabled feature flag set to true.

var eventType;
if (window.navigator.pointerEnabled) {
    eventType = "pointerdown";
} else if (window.navigator.msPointerEnabled) {
    eventType = "MSPointerDown";
}
$(document.body).on(eventType, function(e) { console.log(e) });
Say Thanks
Respond

12 Responses
Add your response

9378
1819c3ec331af74ecae0d92a440b8679

Unfortunately, the problem described can't be reproduced in the preview versions available for download on modern.ie. Hopefully new images will be uploaded, as this is quite an issue.

over 1 year ago ·
9380
Bf64dc75073534abf13084dbf68fde67

Wow.
Apparently some people will simply never learn until they hit 0% market share.

Here are a few reasonable ways to save yourself from writing Spaghetti JS while trying to make F*in IE do its job:

A) Just bind to all events and fuggedaboutit

$(document.body).on("pointerdown MSPointerDown", function(e) { console.log(e) });

B) Use jQuery.event.special and create a polyfill that calls the appropriate event:

https://gist.github.com/x1024/6563378

(Pseudocode, not tested due to lack of IE10/IE11 on my machine.)

More info:

http://benalman.com/news/2010/03/jquery-special-events/

http://learn.jquery.com/events/event-extensions/

https://github.com/jquery/jquery/blob/master/src/event.js#L549

https://github.com/jquery/jquery/blob/master/src/event.js#L694

C) Accept that IE on mobile is dead-in-the-water, and proceed with writing for platforms that don't hate you.

TBH, I would use B) but alias the MS-specific pointer events to just touchstart, touchend & the rest. Or C). Probably C).

over 1 year ago ·
9381
1819c3ec331af74ecae0d92a440b8679

Pointer events matter beyond mobile. I think that their primary purpose is to deal with the Windows 8 touch screen laptops which allow for operating with fingers and mouse, at the same time.

By the way, Google Chrome is also introducing them. Given that, I assume that it is a matter of time that Firefox will pick it, too.

over 1 year ago ·
9589
93e9443ee73a8766bad3fbd7939083ca

Hi, does the pointdown / MSPointerDown can only work in IE11 / 10?
Er... because I find the pointdown event in Hammer,js, but I never hear it. I search from the Internet, but I am not really sure it's a IE event.
I think it's better to test it now, and I also want to get the answer form you.
Thannks.

over 1 year ago ·
9590
93e9443ee73a8766bad3fbd7939083ca

Oh, I find it on: http://www.w3.org/TR/pointerevents/...
pointer = pen + touch + mouse

over 1 year ago ·
10478
48d0ba535075bb4896fe2a9697bec9c2

It's pretty bad that the navigator.msPointerEnabled is set to true even when MSPointerDown isn't firing, as it breaks many exisitng apps. I've opened an issue about this on IE bug tracker - https://connect.microsoft.com/IE/feedback/details/806892/ie11-mspointerdown-not-firing-anymore (please click "I can reproduce this bug").

Also, MSPointerDown event is firing in IE11.0.94, but doesn't in IE11.0.96+.

over 1 year ago ·
11162
8b38ad812c4b4d55cbfcac7c7764cea0 normal

What should we do, code example, line 2:
"if (window.navigator.ponterEnabled) {"
"window.navigator.ponterEnabled"
"ponterEnabled"
"ponter"
? :)

over 1 year ago ·
11166
1819c3ec331af74ecae0d92a440b8679

Thanks, fixed it.

over 1 year ago ·
11475
Qnni2ygvcr20ypuqjui4 normal

The best way to handle this is to feature detect in such a way that prefers the standardized unprefixed API:

if(window.PointerEvent) {<br>

$(document.body).on("pointerdown", function(e) { console.log(e) });

}else if(window.MSPointerEvent) {

$(document.body).on("MSPointerDown", function(e) { console.log(e) });

}

(Note: you may use navigator.pointerEnabled and navigator.msPointerEnabled in place of window.PointerEvent/MSPointerEvent in IE, however these APIs are being removed from the standard as they're largely redundant. So consider them deprecated)


Back story:

In any browser, prefixed APIs should be considered experimental and not guaranteed to be forward-compatible. In designing IE11, our top priority was to align to the latest Pointer Event standard as that is what is also being implemented in Chrome, Firefox, and the Polymer polyfill. Being able to write to the same API across these browsers is key, so this is a component of how we realize that goal.

Supporting prefixed and unprefixed events side by side in the same browser has many challenges including performance, compatibility, supportability, encouraging bad developer practices, etc (in particular, events are more difficult for browsers to side-by-side than other API types). One aggressive option would have been to just drop MSPointer from IE11 altogether. But we found that many sites would continue to work if we silently map MSPointer listeners to pointer (which in turn requires msPointerEnabled to be true)--enough to make a noticeable difference in a user's touch experience in IE.

It's unfortunate that this behavior doesn't work with jQuery's event dispatcher. However, you can take solace in the fact that the cnages you're making to have pointer event code that's compatible with IE11 are the same changes you would need to make in order to be compatible with the pointer event implementations coming online soon in Chrome, Firefox, and Opera.

We definitely heard the feedback on this approach and it's a learning experience that we'll consider as we think through how to iterate on API design across multiple releases like this. In my personal opinion (not necessarily that of Microsoft or the entire IE team), this is an example of how prefixed APIs don't work as they were intended and we should think about alternative approaches to API experimentation.

If you're having trouble making the necessary changes. Feel free to reach out to me on Twitter.

-Jacob Rossi (@jacobrossi)
(Engineer for IE and editor of the Pointer Events standard)

over 1 year ago ·
11481
1819c3ec331af74ecae0d92a440b8679

Jacob, thank you for reaching out! I would like to suggest couple of things which should help further with the problem.

  1. Update the docs. The MSDN documentation published (at least the top Google result) suggests the navigator flag as the best way to detect pointer events support:

http://msdn.microsoft.com/en-us/library/ie/hh673557(v=vs.85).aspx

  1. Update the modern.ie images – this tripped me pretty bad. My guess is that the change you referred to was introduced after the preview images were published. Currently, the site still offers IE 11 Preview/Windows 8.1 as the option for Mac.
over 1 year ago ·
11510
Qnni2ygvcr20ypuqjui4 normal

underlog,

We definitely intend to update the MSDN documentation to reflect this. The decision to remove pointerEnabled just happened (in fact, I'm updating the Editor's Draft of the W3C spec today).

We're also working on updated modern.ie VM images for IE11. Look for those in the coming week or so, I believe. If you need something sooner, you might try the IE11 Release Preview for Windows 7 image, which was the first public build to have unprefixed pointer events and is available on Modern.IE. Just note that touch and pen input are not supported on IE for Windows 7. But mouse will send the unprefixed pointer events in that build.

over 1 year ago ·
12316

I just want to comment here real quick. I stumbled upon your post when I determined jQuery (1.10.2) was never going to fire the touchstart event on a Microsoft Surface Pro tablet.

After a lot of trial and error (why doesn't the below work anyways?) I discovered adding this HTML attribute 'aria-haspopup="true"' resolved the issue completely. Like many web sites we have a dropdown menu activated by hover. Mobile Safari of course handles this natively somehow.

This is from the IE Dev Center [http://msdn.microsoft.com/en-us/library/ie/jj152135(v=vs.85).aspx] regarding using this attribute to resolve hover issues.

I'm surprised that this does not trigger an alert however:

$('a').on('MSPointerDown pointerdown', function(e) {
alert('test');
e.preventDefault();
});

I even used some of the gestures defined in one of the IE Dev Center articles. None seem to work, so I must not fully understand how jQuery implements the on() method. Could someone explain? (jQuery 1.10.2)

over 1 year ago ·