javascript - keydown 模拟点击后， Canvas 上的点击坐标不再与鼠标匹配

Question

我使用 keydown 事件来模拟 Canvas 上的点击。我使用的点击坐标是 x 的 window.innerWidth/2 和 y 的 100，它们位于 Canvas 内。那么相对于 Canvas 的点击坐标就是红色阴影区域的 x 位置 + 1 和 y 位置 + 1。只要将 keyDown 变量设置为 true keydown 事件。否则，它将是鼠标单击坐标减去 Canvas 偏移量。因此，每次我按下空格键时，警报都应该说点击位于阴影区域内，并且只有在那时。

问题是，如果我在使用空格键后使用鼠标单击某个区域，则警报将继续显示与再次使用空格键相同的坐标。如果我在页面加载后和第一次使用空格键之前使用鼠标，警报将显示正确的坐标。

换句话说，如果我用鼠标单击 (40, 39) 和 (170, 173)，警报会告诉我这些区域分别位于阴影区域内部和外部。如果我使用空格键模拟在 (26, 21) 处单击，然后再次使用鼠标，则警报将继续显示 (26, 21)。我该如何解决这个问题？

var canvas = document.getElementsByTagName('canvas')[0],
    ctx = canvas.getContext('2d'),
    keyDown = false,
    areaX = 25,
    areaY = 20,
    areaW = 100,
    areaH = 100,
    event = "ontouchstart" in document.documentElement ? "touchstart" : "click";

// shaded area
ctx.fillStyle = "rgb(192,0,0)";
ctx.fillRect(areaX, areaY, areaW, areaH);

function userAction(e, x, y, w, h, isKey) {
  var cnv = document.getElementsByTagName('canvas')[0],
      clickX = e.pageX - cnv.offsetLeft,
      clickY = e.pageY - cnv.offsetTop;
   
  if (isKey == true) {
    // simulate click somwhere in area
    clickX = x + 1;
    clickY = y + 1;
  }
  
  if (clickX > x && clickX < x + w && clickY > y && clickY < y + h) {
      alert("Inside shaded area at (" + clickX + ", " + clickY + ")");
  } else {
    alert("Ouside shaded area at (" + clickX + ", " + clickY + ")");
  }
}

/* Click/touch function */
canvas.addEventListener(event, function(e){
  userAction(e, areaX, areaY, areaW, areaH, keyDown);
});

/* Keyboard functions */
function clickByKbd(e, x, y) {
  var key = e.keyCode;
  if (key == 32) {
      document.elementFromPoint(x, y).click();
      return false;
  }
}
document.documentElement.addEventListener("keydown", function(e){
  keyDown = true;
  clickByKbd(e, window.innerWidth / 2, 100);
});
document.documentElement.addEventListener("keyup", function(e){
  keyDown = false;
});

body {
  margin:0;
}
canvas {
  display: block;
  margin: auto;
  outline: 1px solid #aaa;
}

<canvas width="200" height="200"></canvas>

Answer 1

问题是，一旦您使用该键，将 keyDown 更改为 true，就不会再将其设置回 false。

如果您在 keyup 函数中添加跟踪，它永远不会触发(您可能希望这会重置 var...但事实并非如此)。

如果您想保持此代码不变并使用最少的修复，请执行以下操作:

document.documentElement.addEventListener("keydown", function(e){
  keyDown = true;
  clickByKbd(e, window.innerWidth / 2, 100);
  keyDown = false; // reset after firing the event. 
}); 

请注意，现在您可以删除 keyup 处理程序。