向canvas元素添加一个单击事件处理程序，返回单击的x和y坐标(相对于canvas元素)，最简单的方法是什么?
不需要传统浏览器兼容性，Safari、Opera和Firefox就可以了。
当前回答
如果你喜欢简单，但仍然需要跨浏览器功能，我发现这个解决方案最适合我。这是一个简化的@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)
})
其他回答
在Prototype中，使用cumulativeOffset()执行上面Ryan Artecona提到的递归求和。
http://www.prototypejs.org/api/element/cumulativeoffset
现代浏览器现在可以帮你处理这个。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是等价的，但是offset之前并不存在。所以，为了兼容稍微老一点的浏览器，你可以使用:
function getRelativeCoords(event) {
return { x: event.offsetX || event.layerX, y: event.offsetY || event.layerY };
}
如果你喜欢简单，但仍然需要跨浏览器功能，我发现这个解决方案最适合我。这是一个简化的@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)
})
根据最新的Quirksmode，所有主流浏览器都支持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 $(canvas).offset()。
嘿，这是在dojo，只是因为它是我已经在一个项目的代码。
如何将其转换回非dojo的普通JavaScript应该是相当明显的。
function onMouseClick(e) {
var x = e.clientX;
var y = e.clientY;
}
var canvas = dojo.byId(canvasId);
dojo.connect(canvas,"click",onMouseClick);
希望这能有所帮助。
