javascript - Canvas 鼠标点击、偏移和父节点

Question

我是 Canvas 新手，我需要知道鼠标点击的坐标。我成功了:

var canvas = document.getElementById('MainMap');

canvas.addEventListener('mousedown', onMapMouseDown, false);

当我试图获得正确的坐标时，问题就来了。我试过了

var x = ev.x - canvas.offsetLeft;

var y = ev.y - canvas.offsetTop;

除了 canvas.offsetLeft = 0 和 canvas.offsetTop = 40。(实际上它是正确的，因为 Canvas 被放置在 div 中的那个位置)。该 div 位于另一个 div 中，该 div 位于一个表中，该表位于一个 div 中......等等。

获得正确位置的解决方案是通过 getParentNode() 在递归函数中添加偏移量；那么问题来了。我现在如何到达顶级节点。可能是文档或顶级 div 或表格。

Answer 1

您不需要遍历每个节点。 offsetLeft 和 offsetTop 表示元素相对于其 offset parent 的距离。 offsetParent 是什么？嗯，它是一个节点的第一个祖先，它的 position 不同于 static(这是，relative，absolute 或 已修复)。

幸运的是，DOM 元素包含一个名为 offsetParent 的属性，它指示哪个祖先是偏移父级，所以...

var offset = {x: 0, y: 0};
var node = canvas;
while (node) {
    offset.x += node.offsetLeft;
    offset.y += node.offsetTop;
    node = node.offsetParent;
}

这一直持续到节点是放置在 (0, 0) 的文档。

另一种更快的方法是使用 jQuery:

var offset = $('#MainMap').offset();