Event Listeners MSPointer are not firing

Question

I am currently trying to learn Javascript and doing the following tutorial ( http://www.sitepoint.com/creating-a-simple-windows-8-game-with-javascript-input-and-sound/ ) however I have run into an issue that I cannot get past.

I have created a canvas element, attached three listeners to the canvas to work with mouse clicks:

canvas.addEventListener("MSPointerUp", endAim, false);
canvas.addEventListener("MSPointerMove", adjustAim, false);
canvas.addEventListener("MSPointerDown", beginAim, false);

But my functions are never being called on PointerUp or Down or Move. Below are the functions in question, also note that I have done "console.log" just to debug.. None of those are being even recorded to the console, which is why I am thinking that the events are not being triggered..

function beginAim(event){
   console.log("Aim ahoy");
   if (playerTurn == 1) {
      if (!isAiming) {
         aimStart = new createjs.Point(event.x, event.y);
         isAiming = true;
      }
   }
}

function adjustAim(event){
   console.log("adjustAim event called");
   if (isAiming) {
      var aimCurrent = new createjs.Point(event.x, event.y);
      aimVector = calculateAim(aimStart, aimCurrent);
      //ToDo: write text / show aim arror
      console.log("Aiming... " + aimVector.x + "/" + aimVector.y);
   }
}

function endAim(event){
   if (isAiming) {
      console.log("endAim Function called");
      isAiming = false;
      var aimCurrent = new createjs.Point(event.x, event.y);
      aimVector = calculateAim(aimStart, aimCurrent);
      playerFire = true;
   }
}

function calculateAim(start, end){
   var aim = new createjs.Point(
      (end.x - start.x) / 80,
      (end.y - start.y) / 80);
   aim.x = Math.min(MAX_SHOT_POWER, aim.x);
   aim.x = Math.max(0, aim.x);
   aim.y = Math.max(-MAX_SHOT_POWER, aim.y);
   aim.y = Math.min(0, aim.y);
   return aim;
}

---

I knew this was going to be a simple issue.. The MSPointerUp /Down / Move are all for Windows8, this is why they never triggered.

I ended up switching to mousedown, mouseup, and mousemove to get the same results.

Answer 1

add to body or canvas to route touch events to JavaScript:

body, canvas {
        -ms-user-select: none;
        touch-action: none;
}

Then, you'll need to create a MSGesture object, set its target to canvas, also create a pointerdown listener:

var gesture = new MSGesture();
gesture.target = canvas;
canvas.addEventListener("pointerdown", beginAim, false)

in beginAim add a handler for pointerdown and add it to gesture like this:

if (event.type == "pointerdown") {
       gesture.addPointer(e.pointerId);
       return
}