canvas绑定键盘事件不会生效 + 解决办法

单片机开发小白

已于 2022-08-21 11:29:44 修改

阅读量2k

点赞数 1

分类专栏：小游戏开发文章标签： javascript

于 2022-08-21 11:28:42 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_47075145/article/details/126448271

版权

小游戏开发专栏收录该内容

6 篇文章

订阅专栏

在创建贪吃蛇游戏时，遇到给canvas元素绑定键盘事件无效的问题。原因是键盘事件只发生在有焦点的HTML元素上，而canvas本身不支持键盘事件。解决方法包括：1) 直接在window对象上绑定键盘事件；2) 让canvas获得焦点，通过设置tabindex属性并调用focus()方法。通过这些方法，可以成功监听并处理键盘事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

canvas绑定键盘事件不会生效

解决办法

1.如果canvas元素和windows长宽基本一致，可以通过在windows对象上绑定键盘事件来代替对canvas元素的监听与处理。

2.让canvas元素处于聚焦状态，并给它绑定键盘事件。

写贪吃蛇游戏时遇到一个问题：想的是给canvas绑定键盘事件，从而操作蛇的移动，但是绑定键盘事件后，却没有效果，然后给window绑定后就可以操操作蛇的移动了。不知道为啥？查阅资料后做出记录：

canvas绑定键盘事件不会生效

对于canvas元素，它支持javascript所有鼠标事件，但是如果监听键盘事件则并不会生效。

<body>
    <style>
        #canvas {
            border: 1px solid skyblue;
        }
    </style>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script>
        let canvas = document.querySelector('#canvas');
        //有效
        canvas.addEventListener('click', (e) => {
            console.log('触发点击了 鼠标事件有效')
        })
        //无效
        canvas.addEventListener('keydown', (e) => {
            console.log('触发按键了 键盘事件无效')
        })
    </script>
</body>

原因在于： 键盘输入事件只发生在当前拥有焦点的HTML元素上，如果没有元素拥有焦点，那么事件将会上移至windows和document对象

解决办法

1.如果canvas元素和windows长宽基本一致，可以通过在windows对象上绑定键盘事件来代替对canvas元素的监听与处理。

        window.addEventListener('keydown', (e) => {
            console.log('触发按键了 键盘事件有效')
        })

2.让canvas元素处于聚焦状态，并给它绑定键盘事件。

<canvas tabindex="0"></canvas>

将tabindex设置为0或更大。

<body>
    <style>
        #canvas {
            border: 1px solid skyblue;
        }
    </style>
    <canvas id="canvas" width="400" height="400" tabindex="0"></canvas>
    <script>
        let canvas = document.querySelector('#canvas');
        //解决办法2 让canvas聚焦 且给canvas添加tabindex="0"属性
        canvas.focus()
        canvas.addEventListener('keydown', (e) => {
            console.log(`keyCode: ${e.keyCode}`)
        })
    </script>
</body>

分析：：tabindex，聚焦的元素会有一层默认的外框，标识该元素处于聚焦状态。

如果不想要显示外框，可以通过css样式去除：

canvas:focus {
  outline:none;
}

整体代码：

<body>
    <style>
        #canvas {
            border: 1px solid skyblue;
        }

        #canvas:focus {
            outline: none;
        }
    </style>
    <canvas id="canvas" width="400" height="400" tabindex="0"></canvas>
    <script>
        let canvas = document.querySelector('#canvas');
        //解决办法2 让canvas聚焦 且给canvas添加tabindex="0"属性
        canvas.focus()
        canvas.addEventListener('keydown', (e) => {
            console.log(`keyCode: ${e.keyCode}`)
        })
    </script>
</body>

结果：