如何在 canvas 游戏使用 javascript onkeydown 事件后停止 facebook 滚动条移动？

Question

我已经使用 HTML5 Canvas 元素，Javascript 为 Z26CAE7718C32180A407A0F8E19D 制作了一个游戏你可以在这里访问它， http://apps.facebook.com/snaqe_game 。 我面临的问题是，当我按下箭头键时，用于移动使用 Javascript onkeydown事件实现的蛇时，游戏正常运行，但滚动条 go 上下移动。 我尝试制作一个文本框（#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;
    }
}

Answer 1

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

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

这可以防止浏览器响应事件，而不是执行您的 function。

您可能还需要更换return null; 在第 161 行，这三行。

---

• MDN 文档中的 event.stopPropagation
• MDN 文档中的 event.preventDefault
• 早期事件处理程序：防止 QuirksMode 出现默认值