Javascript keydown 事件不会在段落上触发

kin*_*ing 2 javascript keydown

<!DOCTYPE html>
<html>

<head>
    <title>Snake!</title>
</head>

<body>
    <p id="lol"></p>
    <p id="change"></p>
    <script>
        var tableau = new Array(21);

        var direction = [0, 0];

        var word = "MERCI";
        var indice = 1;
        var candy = new Array(2);

        candy[0] = Math.floor(Math.random() * 19) + 1;
        candy[1] = Math.floor(Math.random() * 19) + 1;

        var snake = [
            [8, 8]
        ];

        function full_array() {
            for (var x = 0; x < 21; x++)
                tableau[x] = new Array(20);

        }

        full_array();

        function full_tab() {

            for (var x = 0; x < 20; x++)
                tableau[0][x] = 1;
            for (var y = 1; y < 20; y++) {
                tableau[y][0] = 1;
                for (var x = 1; x < 20; x++) {
                    tableau[y][x] = '*';
                }
                tableau[y][20] = 1;
            }
            for (var x = 0; x < 20; x++)
                tableau[20][x] = 1;


            for (var i = 0; i < snake.length; i++) {
                tableau[snake[i][0]][snake[i][1]] = word[(i + word.length) % word.length];
            }

            tableau[candy[0]][candy[1]] = word[indice];
        }

        function aff_tab() {
            var tab = '';
            for (var i = 0; i < 21; i++)
                tab = tab + tableau[i].toString() + "<br/>";
            document.getElementById("lol").innerHTML = tab;
        }

        document.getElementById("change").innerHTML;


        function move_snake() {

            var sx, sy;
            var sav = [snake[snake.length - 1][0], snake[snake.length - 1][1]];
            for (var i = snake.length - 1; i > 0; i--) {
                sx = snake[i - 1][1];
                sy = snake[i - 1][0];
                snake[i][0] = sy;
                snake[i][1] = sx;
            }

            snake[0][0] += direction[0];
            snake[0][1] += direction[1];
            if (tableau[snake[0][0]][snake[0][1]] == 1) {
                restart_game();
            }

            full_tab();
            aff_tab();
            if (snake[0][0] == candy[0] && snake[0][1] == candy[1]) {

                add_candy();
                indice++;
                snake.push(sav);
                if (indice == word.length)
                    indice = 0;
            }

        }

        function restart_game() {
            clearInterval(timerID);
            snake = [
                [8, 8]
            ];
            direction = [0, 0];
            indice = 1;
            add_candy();
            full_tab();
            timerID = setInterval(function() {
                move_snake();
            }, 300);
        }

        function add_candy() {
            candy[0] = Math.floor(Math.random() * 19) + 1;
            candy[1] = Math.floor(Math.random() * 19) + 1;
        }

        var timerID = setInterval(function() {
            move_snake();
        }, 300);

        var game = document.getElementById('lol');
        game.addEventListener('keydown', function(e) {

                if (e.keyCode == 37)
                    direction = [0, -1];
                if (e.keyCode == 38)
                    direction = [-1, 0];
                if (e.keyCode == 39)
                    direction = [0, 1];
                if (e.keyCode == 40)
                    direction = [1, 0];

            }, false

        );
    </script>

</body>

</html>
Run Code Online (Sandbox Code Playgroud)

我正在尝试向段落添加按键事件。但这不起作用。所以我想知道是否可能。这是一个例子:

var game = document.getElementById("mybalise");
game.addEventListener("keydown", function(e){...}, false);
Run Code Online (Sandbox Code Playgroud)

当我这样做时它起作用:

document.addEventListener(...);
Run Code Online (Sandbox Code Playgroud)

但我猜它在所有文档上都这样做了。如果您需要更多代码,请让我知道。如果您需要更多代码,请让我知道。如果您需要更多代码,请让我知道。如果您需要更多代码,请让我知道。如果您需要更多代码,请让我知道。谢谢

Mou*_*ser 5

keydown工作:tabindex="1"首先添加并单击它以获得焦点。否则它只会注册文档,因为它具有焦点。

game.addEventListener("keydown", function(e){...}, false);
Run Code Online (Sandbox Code Playgroud)

这段代码绝对完美。用鼠标单击更改的元素并开始输入。

keydown 适用于所有 HTML 元素,除了:<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>

span然而,像、 、b之类的元素似乎p没有获得适当的焦点来触发 keydown 事件。您可以通过为元素指定 a tabindex(这意味着可以使用选项卡选择它)来规避此问题。在下面的例子中我已经演示了这一点。

game.addEventListener("keydown", function(e){...}, false);
Run Code Online (Sandbox Code Playgroud)
document.getElementById("sample").addEventListener("keydown", function(e){e.preventDefault(); alert(e.type)}, false);
Run Code Online (Sandbox Code Playgroud)
#sample {
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
Run Code Online (Sandbox Code Playgroud)

另外:您在代码中谈到keypress并使用了。keydown请记住,它们是完全不同的事件。

  • @user3549047 然后将 `e.preventDefault()` 放在事件处理程序的末尾。这应该...防止...向下滚动的默认行为:) (2认同)