事件侦听器 MSPointer 未触发

Posted 2023-02-22

【中文标题】事件侦听器 MSPointer 未触发

【英文标题】：Event Listeners MSPointer are not firing

【发布时间】：2013-05-19 02:42:59

【问题描述】：

我目前正在尝试学习 javascript 并学习以下教程 (http://www.sitepoint.com/creating-a-simple-windows-8-game-with-javascript-input-and-sound/)，但是我遇到了一个无法解决的问题。

我创建了一个画布元素，将三个侦听器附加到画布上以使用鼠标单击：

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

但我的函数永远不会在 PointerUp 或 Down 或 Move 上被调用。 以下是有问题的功能，还请注意，我已经完成“console.log”只是为了调试..这些功能甚至都没有记录到控制台，这就是为什么我认为事件没有被触发..

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;

---

我知道这将是一个简单的问题。MSPointerUp /Down / Move 都是针对 Windows8 的，这就是它们从未触发的原因。

我最终切换到 mousedown、mouseup 和 mousemove 以获得相同的结果。

【问题讨论】：

你能演示一下 jsfiddle.net

我们可以假设您在 IE10 中进行测试吗？

【参考方案1】：

添加到正文或画布以将触摸事件路由到 JavaScript：

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

然后，您需要创建一个 MSGesture 对象，将其目标设置为画布，同时创建一个向下指针监听器：

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

在 beginAim 中为 pointerdown 添加一个处理程序并将其添加到手势中，如下所示：

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