在HTML5画布上为绘制的对象添加事件监听器

Question

我正在制作一个游戏，屏幕上会出现气泡（圆形），并向上移动，我仅使用HTML5和JavaScript，没有使用任何框架，如kinetic和jQuery。

我已经达到了想要将事件监听器添加到气泡本身的地步，现在我理解因为气泡是画布上的对象，它没有方法“addEventListener”，所以我不能直接向气泡添加点击事件，我想知道是否有人能帮助我解决这个问题？ 这是目前发生的事情的演示链接... Bubbles 我尝试按照之前指定的方式向气泡添加事件监听器，做法如下...

bubbles[i].addEventListener('click', function);

我还尝试添加了鼠标事件，例如

bubbles[i].onmouseenter = function () { console.log("blah") }

但是现在，我真的很困惑

提前致谢！

- user3045449

---

由于气泡实际上不是DOM元素，因此您无法将事件绑定到它们。相反，我建议您将mousemove事件绑定到画布上，并获取相对鼠标坐标。当您拥有这些坐标时，可以循环遍历您的气泡数组以检查鼠标是否在其中任何一个气泡内部。 - Jacob Lauritzen

Answer 1

我已经更新了您的 jsfiddle示例，展示了命中测试。这个示例使用绑定到画布上的onmousemove事件处理程序，在此事件发生时执行实际的命中测试。在您的情况下，命中测试是“鼠标坐标是否在气泡圆内？”

更改摘要：

- “气泡”具有颜色属性，以演示命中测试的效果。 - 函数function hitTest(x, y) { ... }用于测试传入的坐标是否在气泡内。 - 函数function getMouse(e, canvas) ...用于将鼠标坐标转换为相对于画布的坐标。即，鼠标坐标需要相对于画布左上角才能准确无误。

- veritasetratio

---

太好了！它成功了，而且我现在更加理解了！ - user3045449