为的addEventListener在画布上的keydown(addEventListener fo

我试图做一个画布应用程序，响应键盘和鼠标输入。 我有这样的代码：

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

在“鼠标按下”警报出现时，我点击鼠标，但“的keydown”警报从未出现。 相同的代码工作正常上JS斌： http://jsbin.com/uteha3/66/

为什么没有它的工作我的网页上？ 难道帆布不能识别键盘输入？

Answer 1:

编辑 -这答案是一个解决方案，但一个更简单的和适当的方法将被设置tabindex canvas元素的属性（由hobberwickey的建议）。

你不能专注canvas元素。 一个简单的解决这个问题，将是使你“自己”的焦点。

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 2:

canvas元素的tabindex属性设置为1或类似这样的东西

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

这是一个老把戏，使任何元素可获得焦点

文章来源: addEventListener for keydown on Canvas