如何在画布游戏中使用javascript onkeydown事件后阻止facebook滚动条移动

How to stop facebook scrollbars from moving after using javascript onkeydown event for a canvas game?

本文关键字：事件 onkeydown javascript 移动 滚动条 facebook 布游戏 游戏      更新时间：2023-09-26

我用HTML5 Canvas Element制作了一个游戏，这是facebook的Javascript。你可以在这里参观，http://apps.facebook.com/snaqe_game.我面临的问题是，当我按下向下箭头键（用于移动使用Javascriptonkeydown事件实现的蛇）时，游戏正常工作，但滚动条会上下移动。我试着制作一个文本框（#activ）并设置焦点。它很有效，但当我试图让它不可见时，它失败了。

document.onkeydown = function(event) {
    document.getElementById('activ').focus()
    if (!allowPressKeys) {
        return null;
    }
    var keyCode;
    if(event == null) {
        keyCode = window.event.keyCode;
    } else {
        keyCode = event.keyCode;
    }
    switch(keyCode) {
        case 37:
            if (direction != "right") {
                moveLeft();
            }
            break;
        case 38:
            if (direction != "down") {
                moveUp();
            }
            break;
        case 39:
            if (direction != "left") {
                moveRight();
            }
            break;
        case 40:
            if (direction != "up") {
                moveDown();
            }
            break;
        default:
            break;
    }
}

在document.onkeydown函数的末尾（在snake.js的第197行之后）添加

if (event.preventDefault) { event.preventDefault(); }
if (event.stopPropagation) { event.stopPropagation(); }
return false;

这将阻止浏览器在执行您的功能之外对事件做出响应。

您可能还需要将第161行的return null;替换为这三行。

  • event.stop MDN文档中的传播
  • event.preventMDN文档中的默认值
  • 早期事件处理程序：在QuirksMode中防止默认
相关文章：