0

私はJquery（ソフトウェアデザインの先生からの挑戦）なしでピンポンゲームをプログラムしようとしていて、パドルを動かすためにonkeypressを使うことを計画しています。ただし、イベントハンドラーで指定された関数に特定のキーをアタッチする方法がわかりません。

それほど関連性はありませんが、私のコードは次のとおりです。

HTML：

<div id="Paddle1" class="paddle" onkeypress="PaddleMovement1(event)"></div>
<div id="Paddle2" class="paddle" onkeypress="PaddleMovement3(event)"></div>

Javascript：

var PaddleMovement1 = function(){
    document.getElementById('Paddle1Up').style.animationPlayState="running";
    setTimeout(Paddle1Stop1, 25)
    var Paddle1Stop1 = function(){
        document.getElementById('Paddle1Up').style.animationPlayState="paused";
    };
};

var PaddleMovement2 = function(){
    document.getElementById('Paddle1Down').style.animationPlayState="running";
    setTimeout(Paddle1Stop2, 25)
    var Paddle1Stop2 = function(){
        document.getElementById('Paddle1Down').style.animationPlayState="paused";
    };
};

var PaddleMovement3 = function(){
    document.getElementById('Paddle2Up').style.animationPlayState="running";
    setTimeout(Paddle2Stop1, 25)
    var Paddle2Stop1 = function(){
        document.getElementById('Paddle2Up').style.animationPlayState="paused";
    };
};

var PaddleMovement4 = function(){
    document.getElementById('Paddle2Down').style.animationPlayState="running";
    setTimeout(Paddle2Stop2, 25)
    var Paddle2Stop2 = function(){
        document.getElementById('Paddle2Down').style.animationPlayState="paused";
    };
};

最後に、完全なものはこのjsfiddleにあります。

http://jsfiddle.net/2RfzF/2/

4

1 に答える 1

2

keypress他のキーではなく、入力可能な文字を生成するキーが押された場合にのみ発生します。他のキーを検出するには、とを使用keydownしkeyupます。これは仕様からかなり明確になっているはずです：

ユーザーエージェントは、キーが通常文字値を生成する場合に限り、キーが押されたときにこのイベントをディスパッチする必要があります。

このページは、ブラウザ間でのJavaScriptのキーボードイベントである狂気への便利なガイドです...

これとは別に、あなたの目的のために、私はおそらくdocument特定の要素ではなくイベントをトラップします（keydownそしてkeyupバブルなので、それは機能します）。

例えば：

(function() {
    if (document.addEventListener) {
        document.addEventListener("keydown", keyDownHandler, false);
        document.addEventListener("keydown", keyUpHandler, false);
    }
    else if (document.attachEvent) {
        document.attachEvent("onkeydown", function() {
            keyDownHandler(window.event);
        });
        document.attachEvent("onkeydown", function() {
            keyUpHandler(window.event);
        });
    }
    else {
        // If you want to support TRULY antiquated browsers
        document.onkeydown = function(event) {
            keyDownHandler(event || window.event);
        };
        document.onkeyup   = function(event) {
            keyUpHandler(event || window.event);
        };
    }

    function keyDownHandler(e) {
        var key = e.which || e.keyCode;
        display("keydown: " + key);
    }

    function keyDownHandler(e) {
        var key = e.which || e.keyCode;
        display("keyup: " + key);
    }

    function display(msg) {
        var p = document.createElement('p');
        p.innerHTML = String(msg);
        document.body.appendChild(p);
    }
})();

ライブコピー| ソース

于 2012-11-10T14:33:08.663 に答える