如何获得鼠标单击画布元素的坐标？

Question

如何获得鼠标单击画布元素的坐标？

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

不需要传统浏览器兼容性，Safari、Opera和Firefox就行了。

Answer 1

正如我在当时发现的一篇文章中所描述的，但现在已经不存在了：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;对我来说很好。

Answer 2

由于画布的样式并不总是相对于整个页面的样式，所以canvas.offsetLeft/Top并不总是把你需要的东西还回去。它将返回相对于其offsetParent元素偏移的像素数，该元素可以类似于div元素，其中包含带有position: relative风格适用。要解释这一点，您需要遍历offsetParents，从画布元素本身开始。这段代码在Firefox和Safari中测试过，非常适合我，但应该适用于所有人。function relMouseCoords(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;     return {x:canvasX, y:canvasY}}HTMLCanvasElement.prototype.relMouseCoords = relMouseCoords;最后一行为获取相对于画布元素的鼠标坐标提供了方便。得到有用的坐标所需要的就是coords = canvas.relMouseCoords(event);canvasX = coords.x;canvasY = coords.y;