Question

我试图将事件处理程序附加到canvas元素中的keyDown事件。这是我的代码的简化版本。

class CanvasFun{

  CanvasElement canvas;

  CanvasFun(this.canvas){
    print("Game is loading!");
    this.canvas.onKeyDown.listen(handleInput);
  }

  void handleInput(e)
  {
    //breakpoint is never hit
    print(e.keyCode);
  }
}

我删除了一些绘图代码。在我的main函数中，我只是查询canvas元素并将其传递给我的CanvasFun构造函数。

我也尝试过这样做：

void main() {

  var canvas = query("#Game");

  canvas.onKeyDown.listen(handleInput);

  var canvasFun = new CanvasFun(canvas); 

}
void handleInput(e)
{
  print(e.keyCode);
}

Answer 1

John McCutchan编写了一个很好的Dart包来帮助处理键盘输入。您可以在此处详细了解：http://dartgamedevs.org/blog/2012/12/11/keyboard-input/

请注意，此库可帮助您“正确”处理输入。您不希望在输入处理中执行任何“工作”，而只是想要注册按下了某个键。您可以检查requestAnimationFrame回调中任何按键的状态。

希望有所帮助！

Answer 2

事件未触发的原因是因为焦点在于文档（或者某些其他元素，例如输入）。事实上，即使在聚焦时，canvas元素也不会触发事件。有些元素就像输入元素一样。

解决方案是从文档或窗口中收听关键事件：

window.onKeyDown.listen(handleInput);
document.onKeyDown.listen(handleInput); // You already noticed this worked.

Answer 3

有一种解决方法可以让canvas - 元素接受KeyboardEvents：

Problems handling KeyboardEvents on DartFlash

将tabindex - 属性添加到canvas - 元素后，它可以获得焦点，然后它将接收KeyboardEvents。

Answer 4

如果我在文档而不是canvas元素上注册事件，看起来我可以让它工作。

document.onKeyDown.listen(handleInput);

为什么keydown事件没有被解雇？

4 个答案: