我正在尝试制作一个响应键盘和鼠标输入的画布应用程序。我有这个代码：
canvas = document.getElementById('canvas');
canvas.addEventListener('mousedown', function(event) {
alert('mousedown');
}, false);
canvas.addEventListener('keydown', function(event) {
alert('keydown');
}, false);
每当我单击鼠标时都会出现“鼠标按下”警报，但“键盘按下”警报永远不会出现。相同的代码在 JS Bin 上运行良好：http : //jsbin.com/uteha3/66/
为什么它在我的页面上不起作用？画布无法识别键盘输入吗？
将画布元素的 tabindex 设置为 1 或类似的东西
<canvas tabindex='1'></canvas>
使任何元素可聚焦是一个古老的技巧
编辑- 这个答案是一个解决方案，但更简单和正确的方法是tabindex在画布元素上设置属性（如 hobberwickey 所建议的）。
您无法聚焦画布元素。解决此问题的一个简单方法是让您“自己”专注。
var lastDownTarget, canvas;
window.onload = function() {
canvas = document.getElementById('canvas');
document.addEventListener('mousedown', function(event) {
lastDownTarget = event.target;
alert('mousedown');
}, false);
document.addEventListener('keydown', function(event) {
if(lastDownTarget == canvas) {
alert('keydown');
}
}, false);
}
将所有 js 代码封装在 window.onload 函数中。我有一个类似的问题。一切都在 javascript 中异步加载，因此某些部分的加载速度比其他部分快，包括您的浏览器。将所有代码放在 onload 函数中将确保在尝试执行之前，您的代码需要从浏览器中获取的所有内容都可以使用。
有时只需将画布的 tabindex 设置为“1”（或“0”）即可。但有时 - 它没有，出于某种奇怪的原因。
在我的情况下（ReactJS 应用程序，动态画布 el 创建和安装）我需要调用 canvasEl.focus() 来修复它。也许这与 React 有某种关系（我基于 KnockoutJS 的旧应用程序在没有 '..focus()' 的情况下工作）