Fatal编程技术网
  • javascript/
  • Javascript 画布游戏空格键滚动浏览器

Javascript 画布游戏空格键滚动浏览器

javascript canvas

Javascript 画布游戏空格键滚动浏览器,javascript,canvas,keyboard-events,Javascript,Canvas,Keyboard Events,这对我来说很好。事件被发送到我的处理程序 但每当我点击空格键时，浏览器窗口就会滚动 在键盘事件进入浏览器之前，是否有一些方法可以将其消化掉 （我尝试将处理程序放在窗口和文档上，结果相同）。自从它起作用以来，我将其作为答案发布： var canvas = document.getElementById('myCanvas'); canvas.addEventListener('keydown', function (event) { myHandleKeyboardEvent(event);

这对我来说很好。事件被发送到我的处理程序

但每当我点击空格键时，浏览器窗口就会滚动

在键盘事件进入浏览器之前，是否有一些方法可以将其消化掉

（我尝试将处理程序放在
窗口和
文档上，结果相同）。
自从它起作用以来，我将其作为答案发布：


var canvas = document.getElementById('myCanvas');
canvas.addEventListener('keydown', function (event) {
   myHandleKeyboardEvent(event);
}, false);


这个片段现在包含了作者给出的重要建议

这是一个指向工作演示的链接
 您可以将事件处理程序附加到文档并使用第一次工作的event.preventDefault（）。我到处都找遍了，结果什么地方都没有找到答案。多谢！不过，您可能希望使画布可聚焦（通过向其添加tabindex属性），并且仅当画布是document.activeElement时才阻止keydown的默认行为，以避免在不需要时阻止它。@kaido-Yes。这是个好建议。我还必须将画布的tabIndex设置为1，否则它不会吸引焦点。谢谢，先生们。

var canvas = document.getElementById("myCanvas");
document.addEventListener(
  "keydown",
  function(event) {
    if (document.activeElement && document.activeElement.id === canvas.id) {
      event.preventDefault();
      myHandleKeyboardEvent(event);
    }
  },
  false
);