将click事件处理程序添加到canvas元素(将返回click的x和y坐标)(相对于canvas元素)的最简单方法是什么？

不需要旧版浏览器兼容性，Safari，Opera和Firefox都可以。

解决方案

回答

嘿，这是在dojo中，只是因为这就是我已经在一个项目中使用的代码。

如何将其转换回非dojo vanilla JavaScript应该是相当明显的。

function onMouseClick(e) {
      var x = e.clientX;
      var y = e.clientY;
  }
  var canvas = dojo.byId(canvasId);
  dojo.connect(canvas,"click",onMouseClick);

希望能有所帮助。

回答

进行坐标转换时要小心； click事件中返回了多个非跨浏览器值。如果滚动浏览器窗口(在Firefox 3.5和Chrome 3.0中验证)，仅使用clientX和clientY是不够的。

这篇古怪的模式文章提供了一个更正确的功能，可以使用pageX或者pageY或者将clientX与document.body.scrollLeft结合使用，以及将clientY与document.body.scrollTop结合使用，以计算相对于文档原点的单击坐标。

更新：此外，offsetLeft和offsetTop是相对于元素的填充大小，而不是内部大小。应用padding：样式的画布不会将其内容区域的左上角报告为offsetLeft。有多种解决方案可以解决此问题。最简单的方法可能是清除画布本身上的所有边框，填充等样式，然后将它们应用于包含画布的盒子。

回答

如此处所述：

var x;
var y;
if (e.pageX || e.pageY) { 
  x = e.pageX;
  y = e.pageY;
}
else { 
  x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 
  y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
} 
x -= gCanvasElement.offsetLeft;
y -= gCanvasElement.offsetTop;

对我来说工作得很好。