Question

我正在使用keydown事件来模拟画布上的点击次数。我正在使用的点击坐标是window.innerWidth / 2表示x，100表示y，它位于画布中。然后相对于画布的点击坐标是红色阴影区域的x位置+ 1和y位置+ 1.只要keyDown变量在true上设置为keydown就是这种情况。 {1}}事件。否则，它将是鼠标点击坐标减去画布偏移量。因此，每当我按空格键时，警报应该说点击是在阴影区域内，并且只有这样。

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

换句话说，如果我点击鼠标（40,39）和（170,173），警报会告诉我这些区域分别位于阴影区域的内部和外部。如果我使用空格键模拟所选择的点击（26,21），然后再次使用鼠标，警报将继续给我（26,21）。我怎么解决这个问题？

＆＃13;

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;
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

问题是，一旦你使用了key，它将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处理程序。

在keydown模拟点击

1 个答案: