Javascript 获取DIV内部画布上的单击坐标

我在一个div中有一个画布，如果它太大，它可以向右/向左滚动。我需要得到画布上的点击坐标。我已经尝试了很多不同的东西，但都没有给我正确的坐标。我在画布中有一个矩形，当我点击位于设置坐标的矩形时，“点击”的坐标不是它们应该的坐标，x坐标是100px短。谁能给我指一下正确的方向吗

HTML:

CSS:

#简历{
显示：块；
宽度：1500px；
高度：500px；
溢出：自动；
}

canvas.addEventListener（“mousedown”，doMouseDown，false）；
函数doMouseDown（事件）{
var totalOffsetX=0；
var totalOffsetY=0；
var canvasX=0；
var-canvasY=0；
var currentElement=此；
做{
totalOffsetX+=currentElement.offsetLeft-currentElement.scrollLeft；
totalOffsetY+=currentElement.offsetTop-currentElement.scrollTop；
}
while（currentElement=currentElement.offsetParent）
canvasX=event.pageX-totalOffsetX；
canvasY=event.pageY-totalOffsetY；
}

我刚刚使用了鼠标跟随功能，如果有一次点击，它将获取该点的坐标。这不是我想要的，但它似乎工作得很好

看看这是否能帮助你：30000的宽度似乎有点超出了边缘。这不是很有趣。但它是必要的，画布是用于使用数据表单Whitepages Pro API的可点击图形，有时这还不够：）你可以使用更小的画布与translate相结合，只需重新绘制可见部分。这样会有更好的内存性能，重画性能；有些浏览器只能显示8-10k的宽度。。只是一个提示。很抱歉，您还没有将其排序，但请仔细查看@KenFyrstenberg提供的链接——即使在滚动窗口且画布部分脱离屏幕时，它也会正确返回鼠标X&Y。

<div id="cv">
<canvas id="canvas" width="30000" height="600"></canvas>
</div>

<style>
#cv{
   display: block;
   width: 1500px;
   height: 500px;
   overflow: auto;
}

<script>
canvas.addEventListener("mousedown", doMouseDown, false);
function doMouseDown(event){
var totalOffsetX = 0;
var totalOffsetY = 0;
var canvasX = 0;
var canvasY = 0;
var currentElement = this;
do{
    totalOffsetX += currentElement.offsetLeft - currentElement.scrollLeft;
    totalOffsetY += currentElement.offsetTop - currentElement.scrollTop;
}
while(currentElement = currentElement.offsetParent)
canvasX = event.pageX - totalOffsetX;
canvasY = event.pageY - totalOffsetY;
}
</script>