为什么 Firefox event.offsetX 和 offsetY 未定义？答案

【问题标题】：Why Firefox event.offsetX and offsetY are undefined?为什么 Firefox event.offsetX 和 offsetY 未定义？
【发布时间】：2013-06-22 00:49:41
【问题描述】：

我刚刚在我的软件中偶然发现了一个仅在 Firefox 上发生的错误。原因是事件没有定义 offsetX 和 offsetY。

感谢this，我设法修复了它。

无论如何，我的问题不是编程帮助请求。我只是好奇为什么这些属性在 Firefox 中是未定义的？背后的原因是什么？

我确实看过：DOM3 UIEvent Spec.、DOM3 MouseEvent Spec. 和 DOM2 MouseEvent Spec.。

那里似乎没有提到这两个属性，所以，我想这是其他浏览器中引入的非官方属性？

【问题讨论】：

标签： javascript firefox dom cross-browser offset

【解决方案1】：

offsetX 和 offsetY 在 Firefox 中是不一致的，所以你可以这样做

document.body.onclick = function(e) {
    e = e || window.event;

    var target = e.target || e.srcElement,
        rect = target.getBoundingClientRect(),
        offsetX = e.clientX - rect.left,
        offsetY = e.clientY - rect.top;

    console.log([offsetX, offsetY]);
};

你可以找到更多信息Here和here

【讨论】：

【解决方案2】：

尽管在W3 specification 中提到，offsetx/offsety 属性本身在不同浏览器中的实现不一致。

虽然在 IE、Webkit 浏览器和 Opera 中受支持，但它们的功能与规范要求略有不同，除了 IE - according to the "Calculating offsetX, offsetY" section here。

Firefox 根本不支持这些属性 - 似乎是 a long-time bug 尚未解决。

“我想这是在其他地方引入的非官方属性浏览器？”

我相信这是一个官方属性，只是尚未在 Firefox 中实现。如果它是一个非官方的 IE 属性，它就不会在 W3 规范中提到的 Webkit/Opera 浏览器中实现，Firefox 也不会真正尝试实现它（查看上面的错误链接）。

【讨论】：

仅供参考：Opera 现在是 Webkit 浏览器 [1], [2]。 Chrome 不再是 Webkit，它是 Blink 1。而且，Opera 似乎将跟随 Chromium，也转向 Blink [1]。
@joltmode 哇，感谢您的链接。看来我还有一些事情要做。