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吗?

编辑 – 这个答案一个解决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

将canvas元素的tabindex设置为1或类似的东西

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

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

  • animationcanvas看起来像电视噪音
  • SVG和HTML5 Canvas有什么区别?
  • 我如何获得鼠标点击一个canvas元素的坐标?
  • 如何垂直alignment文本?
  • 我怎样才能将HTML元素转换为canvas元素?
  • 快速响应的交互式图表/graphics:SVG,Canvas,其他?
  • 人体animation不平滑
  • HTML5canvas中的GIFanimation
  • HTML5dynamic创buildcanvas
  • 获取canvas中两点之间的距离
  • 如何添加一个简单的onClick事件处理程序到canvas元素?