touchmove/MSPointerMove event not firing in Windows 8

Question

I'm just a lowly uC programmer who's trying to put together a little web interface for his boss. I've got everything working so far except being able to select a square on a canvas using touch input.

This is on a Samsung Slate 7 tablet running Windows 8 and IE10

I've distilled the code down to pretty much the bare essentials here:

var cxt;
var c;

window.onload = function () {

c = document.getElementById('displayCanvas');

cxt = c.getContext('2d');


/*
c.addEventListener("MSPointerUp", mouseUp, false);
c.addEventListener("MSPointerMove", mouseMove, false);
c.addEventListener("MSPointerDown", mouseDown, false);
*/
c.addEventListener("touchend", mouseUp, false)
c.addEventListener("touchmove", mouseMove, false);
c.addEventListener("touchstart", mouseDown, false);

}


function mouseDown(downE) {
    window.console &&  console.log("down");
};


function mouseMove(moveE){
    window.console && console.log("move");
}


function mouseUp() {
    window.console && console.log("end");
}

I get both the start and end events, using both the MSPointer and the "normal" javascript touch events, however the "move" event doesn't register.

I'm sure it's something really simple I'm missing here, thanks for helping me out!

Answer 1

I'm assuming you are interacting with the HTML page in desktop IE on Windows 8. In desktop IE, the MSPointerMove is not firing on that canvas because the default behavior when the user moves their finger around on the screen is to pan the content. If you style the canvas with the following snippet your MSPointerMove event should be detected.

style="-ms-touch-action: none"

Here's a great article on how to get touch working on many browsers. http://blogs.msdn.com/b/ie/archive/2011/10/19/handling-multi-touch-and-mouse-input-in-all-browsers.aspx