onkeyup 和 onkeydown 没有捕捉到任何东西答案

【问题标题】：onkeyup and onkeydown not catching anythingonkeyup 和 onkeydown 没有捕捉到任何东西
【发布时间】：2011-01-23 14:57:09
【问题描述】：

谁能告诉我这是怎么回事？我的控制台没有抛出任何异常。

    function onKeyDown(){
                    var e = event.keyCode;

                    //if (e==87 /*w*/){
                        up = true;
                        throw('up'); 
                    //}

                    if (e==65 /*a*/){
                        left = true;
                    }

                    if (e==83 /*s*/){
                        down = true;
                    }

                    if (e==68 /*d*/){
                        right = true;
                    }
                }

                function onKeyUp(){
                    var e = event.keyCode;

                    //if (e==87 /*w*/){
                        up = false;
                        throw('up'); 
                    //}

                    if (e==65 /*a*/){
                        left = false;
                    }

                    if (e==83 /*s*/){
                        down = false;
                    }

                    if (e==68 /*d*/){
                        right = false;
                    }
                }

Okay, so that was the javascript, and this is the html:

    <body>
            <input id="ss" type="button" value="start/stop" />
            <div id="container" style="border:1px solid; cursor:none; width:480px; height:320px;">
                <canvas id="canvas" width="480" height="320"  onkeyup="onKeyUp();" onkeydown="onKeydown();">
                    Canvas not displaying.
                </canvas>
            </div>
        </body>



Edit: current code:

window.onload = 函数（）{ 在里面（）; };

function init(){
                initSettings();
                initImages();

                document.getElementById('canvas').onkeydown = function(event) {
                    var e = event.keyCode;

                    //if (e==87 /*w*/){
                        up = true;
                        throw('up'); 
                    //}

                    if (e==65 /*a*/){
                        left = true;
                    }

                    if (e==83 /*s*/){
                        down = true;
                    }

                    if (e==68 /*d*/){
                        right = true;
                    }
                }

【问题讨论】：

我不知道背后的原因，但是在我看到的所有代码中都有处理关键事件的画布，我看到事件是在窗口中注册的，而不是在画布上。这是一个例子：html5.litten.com/make-a-maze-game-on-an-html5-canvas/#thecode
那是用JQuery吗，因为我没用。
不，不是……你看代码了吗？它显示在同一页面上。 Sarwar 的观点是它是一个使用画布的页面示例，但它将其键盘事件处理程序附加到 window 对象（尽管我可能会添加在 IE 中不起作用的方式），而不是画布，这可能成为您的问题（另请参阅下面的三十多点评论）。

标签： javascript css html canvas

【解决方案1】：

你应该这样做：

document.onkeydown = function(event) {
    ...
}
document.onkeyup = function(event) {
    ...
}

并摆脱：

onkeyup="onKeyUp();" onkeydown="onKeydown();"

我制作的快速测试页面有效：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript">
document.onkeydown = function(event) {
 event = event || window.event;

 var e = event.keyCode;

 //if (e==87 /*w*/){
  up = true;
  throw('up'); 
 //}

 if (e==65 /*a*/){
  left = true;
 }

 if (e==83 /*s*/){
  down = true;
 }

 if (e==68 /*d*/){
  right = true;
 }
}

document.onkeyup=function(event) {
 event = event || window.event;

 var e = event.keyCode;

 //if (e==87 /*w*/){
  up = false;
  throw('up'); 
 //}

 if (e==65 /*a*/){
  left = false;
 }

 if (e==83 /*s*/){
  down = false;
 }

 if (e==68 /*d*/){
  right = false;
 }
}
</script>
</head>

<body>
    <input id="ss" type="button" value="start/stop" />
    <div id="container" style="border:1px solid; cursor:none; width:480px; height:320px;">
        <canvas id="canvas" width="480" height="320">
            Canvas not displaying.
        </canvas>
    </div>
</body>

</html>

【讨论】：

或者在他的情况下document.getElementById("canvas").onkeydown = ...等，我猜？另外，不要忘记在每个处理程序中做event = event || window.event;的第一件事（这样IE就不会出错。顺便说一句，我很确定他的原始代码会在其他所有内容中出错。）
也许我只是做错了，但如果我将它们附加到画布元素，我无法触发它们。
啊。那也可能是他的问题的一部分:) 诚然我还没有使用过画布。
您是否也尝试过@Ken Franqueiro 关于window.event 和IE 的提示？你用什么浏览器测试？
我现在正在使用 firefox，是的，我使用了，但我认为是 JQuery