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

【问题标题】：Javascript keydown-event won't fire on paragraphJavascript keydown事件不会在段落上触发
【发布时间】：2015-07-26 20:56:04
【问题描述】：

<!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>

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

var game = document.getElementById("mybalise");
game.addEventListener("keydown", function(e){...}, false);

当我这样做时它会起作用：

document.addEventListener(...);

但我猜它在所有文件上都这样做。如果您需要更多代码，请告诉我。如果您需要更多代码，请告诉我。如果您需要更多代码，请告诉我。如果您需要更多代码，请告诉我。如果您需要更多代码，请告诉我。谢谢

【问题讨论】：

使用game.onkeydown=function(){}
我们需要更多代码。我们需要更多代码。我们需要更多代码。我们需要更多代码。我们需要更多代码。我们需要更多代码。谢谢;-)
显示所有相关源代码是获得可靠/良好答案的关键。您能否创建一个工作演示供我们使用，这将为人们找到问题提供一个起点。您是否检查过浏览器控制台是否有任何错误？
Codes 不是 code 的复数形式，我错了没关系，但如果你一直重复同样的错误，请参阅english.stackexchange.com/questions/20455/…
@Danielson Codes 绝对是 code 的复数形式。 “你能把启动代码递给我吗？”然而，正如文章所说，no 在编程环境中使用时，会飞走。

标签： javascript keydown

【解决方案1】：

要使keydown 起作用：添加tabindex="1" 并首先单击它以获得焦点。否则它只会注册文档，因为它有焦点。

game.addEventListener("keydown", function(e){...}, false);

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

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

但是，span、b、p 等元素似乎没有获得适当的焦点来触发 keydown 事件。你可以通过给元素一个tabindex 来规避这个问题（这意味着它可以用标签来选择）。在下面的示例中，我已经证明了这一点。

document.getElementById("sample").addEventListener("keydown", function(e){e.preventDefault(); alert(e.type)}, false);

#sample {
  width: 300px;
  height: 300px;
  border: 1px solid red;
}

<p tabindex="1" id="sample">
  Sample (click me and type)
  </p>

还有：您谈到keypress 并在您的代码中使用keydown。请记住，它们是完全不同的事件。

【讨论】：

感谢它有效；）。您从哪里获得有关元素的信息？
互联网，我浏览了 Stack 并使用了一些 Google-fu 来找到最终的解决方案。
哈不，它不起作用。因为如果我多次按下向下按钮，页面就会向下滚动，我希望它是固定的。谢谢
@user3549047 然后将e.preventDefault() 放在事件处理程序的末尾。那应该......防止......向下滚动的默认行为:)
@Amine，这当然是该问题的解决方案。更新了示例。