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>

结果：

相关阅读:
由一个按键程序引发的思考（下）
稀疏表示分类（Sparse Representation for Classification，SRC）
C++语言之组合、聚合类间关系、访问权限、多模块作业详解
经典算法系列之（六）：七大查找——树表查找
利用ChatGPT进行数据分析并生成数据分析报告
前端怎么解决跨域
DevOps2023现状报告｜注重文化、以用户为中心是成功的关键
java毕业设计防疫卫生资讯推荐系统Mybatis+系统+数据库+调试部署
Python 计算思维训练——数组计算与曲线绘制
《致新来的你》

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