javascript - 如何获取父div的offsetX？

Question

为此苦苦挣扎了一段时间，所以我决定制作一个 jsfiddle 来展示一个示例:

gameworld  = document.getElementById('GameWorld');
character  = document.getElementById('c');

gameworld.addEventListener('click', function(e){
    console.log(e);
    character.style.left=''+e.offsetX+'px';
    character.style.top=''+e.offsetY+'px';
});

在这里摆弄:http://jsfiddle.net/g43nxhcw/1/

如果单击红色容器上的任意位置，您将获取 offsetX 和 offsetY。但是，如果您单击图 block ，则会获取其偏移量，这会导致 Angular 色无法移动到该位置。

我想做的是抓取GameWorld的 offsetX和offsetY，即使点击了图 block ，这可能吗？

查看控制台时，我们可以看到 e.target 显示用户单击了哪个元素。这几乎是我能得到的最接近的结果，因为当单击 GameWorld 的父子元素时，我需要找到 GameWorld 元素的偏移量。

当单击 img 图 block 时，我可以通过访问以下内容来访问 GameWorld 节点:

e.path[0]，相关 here

可悲的是，这就是我陷入困境的地方，不知道该用节点树抓取什么。

编辑:我也不想使用pointer-events，因为这似乎是解决问题的一个简单方法，而对于稍后的碰撞检测，它将成为一个问题。

编辑2:警告

我在这些值上使用了 transform:translate(X,Y) 并且它们不会传递到 DOM(用于偏移量)，所以如果有人陷入困境，请记住添加 top: 和 left: 属性，用于 dom 捕获偏移量和值。

Answer 1

您可以添加子项的 offsetLeft 和 offsetTop 属性。对于任意深度(看起来更干净):

var offsetX = e.offsetX;
var offsetY = e.offsetY;

var element = e.target;

while (element !== gameworld) {
    offsetX += element.offsetLeft;
    offsetY += element.offsetTop;
    element = element.parentNode;
}

character.style.left = offsetX + 'px';
character.style.top = offsetY + 'px';

Updated fiddle