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

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

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

canvas绑定键盘事件不会生效

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


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

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

解决办法

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


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

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

将tabindex设置为0或更大。


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

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

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


canvas:focus {
  outline:none;
}

整体代码：


<body>
    
    <canvas id="canvas" width="400" height="400" tabindex="0">canvas>
    
body>

结果：

相关阅读:
Goland快捷键整理
一文了解 Go 标准库 strconv：string 与其他基本数据类型的转换
Spring Boot 集成 EasyExcel 3.x 优雅实现Excel导入导出
＜蓝桥杯软件赛＞零基础备赛20周--第6周--数组和队列
什么是AI推理
【Java】springboot 页面不显示 throw 的错误提示信息
从入门到出师，关于学习RPA的建议！
面试常问CAS和ABA问题，你懂了吗？
【GIT版本控制】--协作流程
前端面试指南之React篇（二）

原文地址：https://blog.csdn.net/weixin_47075145/article/details/126448271