如何获取父 div 的 offsetX？答案

【问题标题】：How do I grab the offsetX of the parent div?如何获取父 div 的 offsetX？
【发布时间】：2015-05-10 19:33:24
【问题描述】：

为此苦苦挣扎了一段时间，所以我决定制作一个 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。但是，如果您单击该图块，则会改为抓住其偏移量，这会导致角色无法移动到该位置。

我想要做的是抓住GameWorld's offsetX 和offsetY 即使点击了磁贴，这可能吗？

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

当点击img 磁贴时，我可以访问GameWorld's 节点，方法是：

e.path[0]，相关here

遗憾的是，这就是我卡住的地方，不知道用节点树抓取什么。

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

Edit2：警告

我在这些 VALUES 上使用了transform:translate(X,Y)，但它们不会传递给 DOM（用于偏移），所以如果有人卡在这个问题上，请记住为 dom 添加 top: 和 left: 属性以捕获偏移量和值。

【问题讨论】：

在 FF 中的 offsetX/offsetY 上：stackoverflow.com/questions/11334452/event-offsetx-in-firefox

标签： javascript

【解决方案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

【讨论】：

哈，为此苦苦挣扎了几个月，您在几分钟内发布了解决方案。我的上帝。将在 T-6 分钟内标记，谢谢。
我刚刚发现了另一个问题。我使用transform: translate('+T[i].x+'px, '+T[i].y+'px); 来定位图块，而top 和left 属性没有被传递给DOM ..... ..哈哈，难怪我有这么多问题。不过吸取了我该死的教训。

【解决方案2】：

请注意，如果这仍然存在问题，您可以根据上下文减去 target.offsetWidth/2 或 target.offsetHeight/2。（因为offsetLeft是从当前元素的中心开始计算的。）

【讨论】：