addEventListener 用于 Canvas 上的 keydown

2022-01-17 00:00:00 canvas javascript html html5-canvas

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

I am trying to make a canvas app that responds to keyboard and mouse input. I have this code:

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/

The 'mousedown' alert comes up whenever I click the mouse, but the 'keydown' alert never comes up. The same code works fine on JS Bin: http://jsbin.com/uteha3/66/

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

Why isn't it working on my page? Does canvas not recognize keyboard input?

推荐答案

编辑 - 这个答案是一个解决方案，但更简单和正确的方法是设置画布元素上的 tabindex 属性(由 hobberwickey 建议).

Edit - This answer is a solution, but a much simpler and proper approach would be setting the tabindex attribute on the canvas element (as suggested by 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

相关文章