我做了一个完整的演示，可以在每个浏览器中使用这个问题的解决方案的完整源代码:在Javascript中单击Canvas的鼠标坐标。要尝试演示，复制代码并将其粘贴到文本编辑器中。然后将其保存为example.html，最后用浏览器打开该文件。

在Prototype中，使用cumulativeOffset()执行上面Ryan Artecona提到的递归求和。

http://www.prototypejs.org/api/element/cumulativeoffset

Edit 2018:这个答案很老了，它使用检查不再需要的旧浏览器，因为clientX和clienti属性在所有当前的浏览器中都有效。您可能想要查看Patriques Answer，以获得一个更简单、更近期的解决方案。

最初的回答: 正如我当时发现的一篇文章所描述的那样，但现在已经不存在了:

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;

对我来说效果很好。

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

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

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

希望这能有所帮助。

我不确定所有这些遍历父元素和做各种奇怪事情的答案的意义是什么。

HTMLElement。getBoundingClientRect方法被设计用来处理任何元素的实际屏幕位置。这包括滚动，所以不需要像scrollTop这样的东西:

(来自MDN)已经完成的视口区域(或 的时候，任何其他可滚动的元素)都被考虑在内 边界矩形

正常的图片

最简单的方法已经贴在这里了。只要不涉及宽泛的CSS规则，这是正确的。

处理拉伸的画布/图像

当图像像素宽度与它的CSS宽度不匹配时，你需要对像素值应用一些比率:

/* Returns pixel coordinates according to the pixel that's under the mouse cursor**/
HTMLCanvasElement.prototype.relativeCoords = function(event) {
  var x,y;
  //This is the current screen rectangle of canvas
  var rect = this.getBoundingClientRect();
  var top = rect.top;
  var bottom = rect.bottom;
  var left = rect.left;
  var right = rect.right;
  //Recalculate mouse offsets to relative offsets
  x = event.clientX - left;
  y = event.clientY - top;
  //Also recalculate offsets of canvas is stretched
  var width = right - left;
  //I use this to reduce number of calculations for images that have normal size 
  if(this.width!=width) {
    var height = bottom - top;
    //changes coordinates by ratio
    x = x*(this.width/width);
    y = y*(this.height/height);
  } 
  //Return as an array
  return [x,y];
}

只要画布没有边界，它就适用于拉伸图像(jsFiddle)。

处理CSS边框

如果画布的边框很厚，事情就会变得有点复杂。你需要从边界矩形中减去边框。这可以使用. getcomputedstyle来完成。这个答案描述了这个过程。

然后函数增大一点:

/* Returns pixel coordinates according to the pixel that's under the mouse cursor**/
HTMLCanvasElement.prototype.relativeCoords = function(event) {
  var x,y;
  //This is the current screen rectangle of canvas
  var rect = this.getBoundingClientRect();
  var top = rect.top;
  var bottom = rect.bottom;
  var left = rect.left;
  var right = rect.right;
  //Subtract border size
  // Get computed style
  var styling=getComputedStyle(this,null);
  // Turn the border widths in integers
  var topBorder=parseInt(styling.getPropertyValue('border-top-width'),10);
  var rightBorder=parseInt(styling.getPropertyValue('border-right-width'),10);
  var bottomBorder=parseInt(styling.getPropertyValue('border-bottom-width'),10);
  var leftBorder=parseInt(styling.getPropertyValue('border-left-width'),10);
  //Subtract border from rectangle
  left+=leftBorder;
  right-=rightBorder;
  top+=topBorder;
  bottom-=bottomBorder;
  //Proceed as usual
  ...
}

我想不出有什么会混淆最后这个函数。在JsFiddle见。

笔记

如果您不喜欢修改本机原型，只需更改函数并使用(canvas, event)调用它(并将任何此替换为canvas)。

参见http://jsbin.com/ApuJOSA/1/edit?html,output上的演示。

  function mousePositionOnCanvas(e) {
      var el=e.target, c=el;
      var scaleX = c.width/c.offsetWidth || 1;
      var scaleY = c.height/c.offsetHeight || 1;

      if (!isNaN(e.offsetX)) 
          return { x:e.offsetX*scaleX, y:e.offsetY*scaleY };

      var x=e.pageX, y=e.pageY;
      do {
        x -= el.offsetLeft;
        y -= el.offsetTop;
        el = el.offsetParent;
      } while (el);
      return { x: x*scaleX, y: y*scaleY };
  }