将单击事件处理程序添加到将返回单击的 x 和 y 坐标（相对于画布元素）的画布元素的最简单方法是什么？
不需要旧版浏览器兼容性，Safari、Opera 和 Firefox 都可以。
如何获取鼠标在画布元素上单击的坐标？
IT技术
javascript
canvas
2021-02-01 10:00:54
6个回答
如果你喜欢简单但仍然想要跨浏览器功能，我发现这个解决方案最适合我。这是@Aldekein 解决方案的简化，但没有 jQuery。
function getCursorPosition(canvas, event) {
const rect = canvas.getBoundingClientRect()
const x = event.clientX - rect.left
const y = event.clientY - rect.top
console.log("x: " + x + " y: " + y)
}
const canvas = document.querySelector('canvas')
canvas.addEventListener('mousedown', function(e) {
getCursorPosition(canvas, e)
})
更新（2016 年 5 月 5 日）：应该改用 patriques 的回答，因为它既简单又可靠。
由于画布的样式并不总是相对于整个页面，因此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;
编辑 2018：这个答案很旧，它使用检查不再需要的旧浏览器，因为clientX和clientY属性在所有当前浏览器中都有效。您可能想查看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;
对我来说非常好。
现代浏览器现在可以为您处理这个问题。Chrome、IE9 和 Firefox 支持这样的 offsetX/Y，从点击处理程序传入事件。
function getRelativeCoords(event) {
return { x: event.offsetX, y: event.offsetY };
}
大多数现代浏览器也支持 layerX/Y，但是 Chrome 和 IE 使用 layerX/Y 作为页面上点击的绝对偏移量，包括边距、填充等。在 Firefox 中，layerX/Y 和 offsetX/Y 是等效的，但偏移量没有'以前不存在。因此，为了与稍旧的浏览器兼容，您可以使用：
function getRelativeCoords(event) {
return { x: event.offsetX || event.layerX, y: event.offsetY || event.layerY };
}
根据新鲜怪异模式将clientX和clientY方法，在所有主要的浏览器都支持。所以，这里是 - 在带有滚动条的页面上的滚动 div 中工作的良好的工作代码：
function getCursorPosition(canvas, event) {
var x, y;
canoffset = $(canvas).offset();
x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft - Math.floor(canoffset.left);
y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop - Math.floor(canoffset.top) + 1;
return [x,y];
}
这也需要jQuery for $(canvas).offset().