Javascript 如何获取父div的offsetX？

在这方面我已经挣扎了一段时间，所以我决定制作一个JSFIDLE来展示一个示例：

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';
});

在这里拉小提琴：

如果单击红色容器上的任意位置，则可以抓取

offsetX

和

offsetY

。但是，如果单击该平铺，则会抓住其偏移量，这会导致角色无法移动到该位置

我想做的是抓取

游戏世界的
offsetX
和
offsetY
，即使点击了互动程序，这是可能的吗

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

单击
img
互动程序时，我可以访问
GameWorld的
节点，方法是访问：

e.path[0]
，视情况而定

可悲的是，这正是我陷入困境的地方，我不确定如何使用节点树

编辑：我也不想使用
指针事件
，因为这似乎是解决问题的简单方法，对于以后的碰撞检测，这将成为一个问题

编辑2:警告
我在这些值上使用了
transform:translate（X，Y）
，它们不会被传递到DOM（对于偏移量），所以如果有人被困在这个问题上，请记住为dom添加
top:
和
left:
属性以捕获偏移量和值。
您可以添加子级的
offsetLeft
和
offsetTop
属性。对于任意深度（看起来更干净）：

请注意，如果这仍然是错误的，则可以根据上下文减去
target.offsetWidth/2
或
target.offsetHeight/2
。（因为
offsetLeft
是从当前元素的中心计算出来的。）
Ha已经为此挣扎了几个月，您可以在几分钟内发布解决方案。天哪。我会在T-6分钟内做标记，谢谢。我刚刚发现另一个问题。。我使用的是
transform:translate（'+T[I].x+'px'+T[I].y+'px）
来定位磁贴和
顶部
和
左侧
属性没有传递到DOM。。。。。。。哈哈，难怪我有这么多问题。不过我学到了教训。关于FF中的offsetX/offsetY：
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';