Canvas上的keydown的addEventListener

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

编辑 - 这个答案是一个解决方案,但更简单和正确的方法是tabindex在canvas元素上设置属性(如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