60

我正在尝试制作一个响应键盘和鼠标输入的画布应用程序。我有这个代码：

canvas = document.getElementById('canvas');
canvas.addEventListener('mousedown', function(event) {
    alert('mousedown');
        }, false);
canvas.addEventListener('keydown', function(event) {
    alert('keydown');
        }, false);

每当我单击鼠标时，都会出现“mousedown”警报，但永远不会出现“keydown”警报。相同的代码在 JS Bin 上运行良好：http: //jsbin.com/uteha3/66/

为什么它在我的页面上不起作用？画布不能识别键盘输入吗？

4

4 回答 4

117

将 canvas 元素的 tabindex 设置为 1 或类似的东西

<canvas tabindex='1'></canvas>

使任何元素都具有焦点是一个古老的技巧

于 2012-10-14T22:35:02.720 回答
62

编辑- 这个答案是一个解决方案，但更简单和正确的方法是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);
}

JSFIDDLE

于 2012-10-14T21:00:28.847 回答
0

有时只需将画布的 tabindex 设置为“1”（或“0”）即可。但有时 - 它没有，出于某种奇怪的原因。

就我而言（ReactJS 应用程序、动态画布 el 创建和挂载），我需要调用 canvasEl.focus() 来修复它。也许这与 React 有某种关系（我基于 KnockoutJS 的旧应用程序在没有 '..focus()' 的情况下工作）

于 2019-10-14T22:51:51.727 回答
0

将所有 js 代码封装在 window.onload 函数中。我有一个类似的问题。一切都在 javascript 中异步加载，因此某些部分的加载速度比其他部分更快，包括您的浏览器。将所有代码放在 onload 函数中将确保您的代码在浏览器中需要的所有内容都可以在尝试执行之前准备好使用。

于 2019-09-10T19:47:38.033 回答