Why Firefox event.offsetX and offsetY are undefined?

Question

I just stumbled upon a bug in my software that happened only on Firefox. The reason was that the event didn't have offsetX and offsetY defined.

I managed to fix it thanks to this.

Anyways, my question is not a programming help request. I'm just curious why these properties are undefined in Firefox? What is the reason behind it?

I did look through: DOM3 UIEvent Spec., DOM3 MouseEvent Spec. and DOM2 MouseEvent Spec..

It appears that neither of the properties are mentioned there, so, I suppose that's an unofficial property introduced in other browsers?

dsgriffin · Accepted Answer · 2013-06-25T09:49:05.803

7

Although mentioned in the W3 specification, the offsetx/offsety properties themselves are implemented inconsistently across browsers.

While supported in IE, Webkit browsers and Opera, they all function slightly different to the specifications requirements, except for IE - according to the "Calculating offsetX, offsetY" section here.

The properties aren't supported in Firefox at all - it appears to be a long-time bug that is yet to be resolved.

"I suppose that's an unofficial property introduced in other browsers?"

I believe it's an official property, that just hasn't been implemented in Firefox. If it was a non-official IE property, it wouldn't have been implemented in the Webkit/Opera browsers, mentioned in the W3 spec nor would Firefox actually be trying to implement it (check out the bug link above).

edited Jun 25 '13 at 09:49

answered Jun 25 '13 at 09:43

dsgriffin

66,495
17
137
137

2

FYI: Opera is now a Webkit browser [\[1\]](http://my.opera.com/ODIN/blog/300-million-users-and-move-to-webkit), [\[2\]](http://business.opera.com/press/releases/general/opera-gears-up-at-300-million-users). And Chrome is not Webkit anymore, it's Blink [1](http://www.chromium.org/blink). And, it seems that Opera is going to follow Chromium, moving also to Blink [\[1\]](http://thenextweb.com/insider/2013/04/04/opera-confirms-it-will-follow-google-and-ditch-webkit-for-blink-as-part-of-its-commitment-to-chromium/). – tomsseisums Jun 25 '13 at 09:51
@joltmode Whoa, thanks for the links. Looks like I have some catching up to do. – dsgriffin Jun 25 '13 at 09:53

score 3 · Answer 2 · answered Jun 08 '15 at 12:15

offsetX and offsetY are inconsistent in Firefox so you can do it this way

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

You can find more info Here and here

Why Firefox event.offsetX and offsetY are undefined?

2 Answers2

Linked