Canvas上的addEventListener

我正在尝试制作一个响应键盘和鼠标input的canvas应用程序。 我有这个代码：

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/

为什么它不在我的网页上工作？ canvas不能识别键盘input吗？

Answer 1

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

您无法集中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> 

使任何元素都可以聚焦是一个古老的伎俩