How do I get the pointer's current position from the MSPointerMove event?

Question

Currently I'm trying to implement touch support for an HTML element that should be draggable across a certain range. It's working on Android and iOS tablets using touchmove, but isn't working yet on IE 10 on a Windows tablet. I've managed to capture the MSPointerMove event, which I think should have a pageX and pageY property, but when I console.log these, I get undefined. Using the gesture events is not an option since I need to how exactly how far it has been dragged across an axis.

So, what properties should I look for?

Answer 1

Unfortunately, it appears my question did not include enough details to include the actual problem - the tablet I could test on can not access the internet, so I could not provide a JSFiddle to demonstrate the problem.

So the problem was that I'm using Angular, which uses a form of jQuery, which wraps events. Usually, this is great: instead of having to detect the particular implementation details of the current browser regarding an event object, jQuery sets the pageX and pageY properties of the wrapper event object itself, so that you can always confidently access those properties.

However: jQuery, at least in the version I'm using (1.10.2), does not yet know how to deal with MSPointer events (or pointer events, used in IE11, for that matter). Thus, although I had a wrapper event object, there were no pageX and pageY properties.

The workaround is to access event.originalEvent, i.e. the browser-specific event. Since this spec looks to be implemented by IE only anyway, it should be relatively safe to assume this object to be constructed the way IE constructs it, and access the pageX and pageY properties on that directly.

Answer 2

I'm not sure how the HTML page is displayed, but put style="-ms-touch-action: none". It might be that because the mousemove event's default is to drag the screen, rather than register a moving mouse.