按键事件onkeyup和onkeydown无法捕获任何内容

Question

按键事件onkeyup和onkeydown无法捕获任何内容

4

有人能告诉我发生了什么事吗？我的控制台没有抛出任何异常。

    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:

窗口加载完成后执行以下函数：

function init(){
    //这里是需要执行的代码
}

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;
                    }
                }

- CyanPrime

2

我不知道原因是什么，但在我看过的所有涉及键盘事件的画布代码中，我发现这些事件都是在窗口上注册的，而不是在画布上注册的。以下是一个例子：http://html5.litten.com/make-a-maze-game-on-an-html5-canvas/#thecode - Sarwar Erfan

那是使用jQuery吗，因为我没有使用它。 - CyanPrime

不，它不是...你看了代码吗？它就在同一页上呈现。Sarwar的观点是这是一个使用canvas的页面示例，但它将键盘事件处理程序附加到“window”对象上（虽然以一种在IE中也无法工作的方式），而不是canvas，这可能是你的问题（另请参见下面thirtydot的评论）。 - Ken Franqueiro

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- thirtydot · Accepted Answer

你应该像这样做：

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>