目录
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>结果：文章来源：https://www.toymoban.com/news/detail-489021.html
文章来源地址https://www.toymoban.com/news/detail-489021.html
到了这里，关于canvas绑定键盘事件不会生效 + 解决办法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
