我可以处理画布对象上的哪些事件？答案

【问题标题】：What are the events on a canvas object I can handle?我可以处理画布对象上的哪些事件？
【发布时间】：2010-11-21 00:37:32
【问题描述】：

我可以处理canvas object 上的哪些事件。特别是，我正在寻找一个鼠标单击（或向下或向上等）事件，它将为我提供画布中的 x 和 y。

【问题讨论】：

标签： javascript canvas dom-events

【解决方案1】：

这里有一点[Demo]。

var canvas = document.getElementById("canvas");
canvas.onclick = function(e) {
  // mouse coordinates relative 
  // to the canvas element
  var position = canvas.getBoundingClientRect();
  var click = {
    x: e.clientX - position.left,
    y: e.clientY - position.top
  };
};

【讨论】：

这在 chrome 中运行良好，但在 FF3.6 中却不行。我想至少支持两个浏览器。
是的，对不起，我忘了 FF 没有直接拥有它。查看我的更新。

【解决方案2】：

您不能将 DOM 事件附加到 DOM 对象（元素）以外的事物上。 canvas 是一个 DOM 元素，你在上面绘制的东西不是。为了获得用户点击的具体 x y 坐标，您必须将点击事件附加到您的 canvas 元素，然后将点击的 x,y 坐标与您的canvas 元素的 x,y 坐标进行比较.

【讨论】：

我可以在画布上使用标准的 OnClick 事件吗？
@C. Ross 是的，您可以将事件处理程序附加到canvas 元素本身，而不是canvas 的特定部分。简短的回答......是的。 :)