캔버스의 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

편집 -이 답변 해결책이지만, (hobberwickey에 의해 제안) 훨씬 간단하고 적절한 방법은 캔버스 요소에 tabindex 속성을 설정 될 것이다.

캔버스 요소를 포커스 할 수 없습니다. 이것에 대한 간단한 작업은 "자신의"초점을 맞추는 것입니다.

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> 

처럼 1 또는 뭔가 캔버스 요소의 tabIndex를 설정