Question

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

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/

为什么它不能在我的页面上运行？画布无法识别键盘输入吗？

Answer 1

将canvas元素的tabindex设置为1或类似这样的

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

使任何元素可聚焦是一个老技巧

Answer 2

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

<强> JSFIDDLE

Answer 3

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

Answer 4

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

在我的情况下（ReactJS应用程序，动态创建和安装画布），我需要调用canvasEl.focus（）进行修复。也许这与React有关（我的基于KnockoutJS的旧应用程序无需'..focus（）'即可）

Canvas上的keydown的addEventListener

4 个答案: