addEventListener cho phím tắt trên Canvas

Question

Tôi đang cố gắng tạo một ứng dụng canvas đáp ứng với đầu vào bàn phím và chuột. Tôi có mã này:

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

Cảnh báo 'mousedown' xuất hiện bất cứ khi nào tôi nhấp chuột, nhưng cảnh báo 'keydown' không bao giờ xuất hiện. Mã giống nhau hoạt động tốt trên JS Bin: http://jsbin.com/uteha3/66/

Tại sao mã không hoạt động trên trang của tôi? Canvas không nhận ra đầu vào bàn phím?

Answer 1

Sửa - Đây trả lời là một giải pháp, nhưng một cách tiếp cận đơn giản hơn nhiều và thích hợp sẽ được thiết lập các thuộc tính tabindex trên yếu tố canvas (theo đề nghị của hobberwickey).

Bạn không thể tập trung yếu tố canvas. Một công việc đơn giản xung quanh điều này, sẽ làm cho tập trung "của riêng bạn".

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

Đặt tabIndex của phần tử canvas tới 1 hoặc một cái gì đó như thế này

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

Đây là một thủ thuật cũ để thực hiện bất kỳ yếu tố có thể đặt tiêu