我在JS中添加了一个事件监听器来监听keyup / keydown事件,我试图在HTML画布上移动一个sprite.我有大部分工作,但当用户按下箭头键时页面正在滚动.

我回归虚假,这似乎不起作用.另外,我的理解是以这种方式返回false会禁用整个页面的箭头按钮滚动.我想只在用户与画布本身交互时禁用它.

这是我的事件监听器：

addEventListener('keydown', function(e){
    move = false;
    x = false;
    y = false;
    var keycode;
    if (window.event) keycode = window.event.keyCode;
    else if (e) keycode = e.which;
    switch(keycode){
        case 37:
            move = true;
            x = 'negative';
        break;
        case 38:
            move = true;
            y = 'negative'
        break;
        case 39:
            move = true;
            x = 'positive'
        break;
        case 40:
            move = true;
            y = 'positive'
        break;
    }
    if(move){
        animation.move(x,y);
    }
    return false;
})

编辑：

下面的答案很清楚如何确保画布是专注的,但我仍然感到困惑,为什么在我的EventListener函数中返回false,返回false不会禁用滚动.

解决方法:

只要你以某种方式给你的画布焦点(即canvas.tabIndex = 1;)然后你就可以在返回false之前添加e.preventDefault()并且它将起作用.

例：

http://jsfiddle.net/faAkN/