Skip to main content

Bug Tracker

Side navigation

#8523 closed bug (wontfix)

Opened March 14, 2011 03:51PM UTC

Closed March 15, 2011 05:24PM UTC

Last modified July 03, 2012 04:17PM UTC

offsetX and offsetY undefined in Firefox 4

Reported by: fnordfish@gmail.com Owned by: fnordfish@gmail.com
Priority: undecided Milestone: 1.next
Component: offset Version: 1.5.1
Keywords: Cc:
Blocked by: Blocking:
Description

The "mousemove" event contains "undefined" keys for "offsetX" and "offsetY" while "layerX" and "layerY" contains valid values.

Attachments (0)
Change History (18)

Changed March 14, 2011 04:33PM UTC by rwaldron comment:1

component: unfiledoffset
owner: → fnordfish@gmail.com
status: newpending

Thanks for taking the time to contribute to the jQuery project! Please provide a reduced jsFiddle test case to help us assess your ticket!

Additionally, test against the jQuery 0 GIT version to ensure the issue still exists.

Changed March 14, 2011 05:25PM UTC by fnordfish@gmail.com comment:2

status: pendingnew

jsFiddle sample is available at http://jsfiddle.net/62Yuu/

It "console.log"s the "event.offestX" and "event.layerX". Firefox 4 prints something like "undefined 123" while chrome prints (in most cases) equal numbers for both values.

Changed March 14, 2011 09:25PM UTC by dmethvin comment:3

_comment0: \ http://api.jquery.com/mousemove/ \ \ > Properties such as .clientX, .offsetX, and .pageX are available, but support for them differs between browsers. Fortunately, jQuery normalizes the .pageX and .pageY properties so that they can be used in all browsers. \ 1300138016466700

http://api.jquery.com/mousemove/

Properties such as .clientX, .offsetX, and .pageX are available, but support for them differs between browsers. Fortunately, jQuery normalizes the .pageX and .pageY properties so that they can be used in all browsers.

Does .pageX do what you expected?

Changed March 14, 2011 09:26PM UTC by dmethvin comment:4

status: newpending

Changed March 14, 2011 09:30PM UTC by fnordfish@googlemail.com comment:5

Ok, not necessarily a bug. However, it would be pretty cool, if jQuery would normalize offestX as well (if possible) ;)

Changed March 15, 2011 05:24PM UTC by dmethvin comment:6

resolution: → wontfix
status: pendingclosed

Every extra property that we have to normalize in an event handler is more time spent in the event handler. If .pageX doesn't do what you want then you're free to analyze the other browser-specific data and extract what you need from it.

Changed April 07, 2011 07:23PM UTC by microry comment:7

Something in jquery doing this :

if (!evt.offsetX){
     evt.offsetX = evt.layerX - $(evt.target).position().left;
}
if (!evt.offsetY){
     evt.offsetY = evt.layerY - $(evt.target).position().top;
}

would be useful;

Changed September 22, 2011 05:49PM UTC by VIPStephan comment:8

Just for clarification, in case anybody needs to get this functionality working (without modifying the core):

var offX, offY;
if (!(e.offsetX || e.offsetY)) {
	offX = e.layerX - $(e.target).position().left;
	offY = e.layerY - $(e.target).position().top;
}
else {
	offX = e.offsetX;
	offY = e.offsetY;
}

You can then use it like:

$('#example').css({
	left:  offX,
	top:   offY
});

(for example in a mousemove event)

Changed December 13, 2011 04:53PM UTC by anonymous comment:9

please, add offsetX/Y for Firefox in Event object

Changed March 27, 2012 10:20AM UTC by anonymous comment:10

I can't seems to find event.layerX however this code seems to work:

var offsetX = event.screenX - $(event.target).offset().left;

though chrome/firefox gives me slight different results (chrome give me 90 where firefox give me 94 in one case)

Changed April 03, 2012 06:02AM UTC by anonymous comment:11

I use the approach below:

#!js
 var x = evt.offsetX;
 if (x == undefined) {
     x = evt.clientX - $(evt.target).offset().left;
 }

Changed April 03, 2012 10:38AM UTC by RonnyO comment:12

I don't think this justified a 'polyfill'. When I want offsetX for example, I just put this instead:

(ev.offsetX || ev.clientX - $(ev.target).offset().left)

This way it's slightly faster when already exists.

Changed April 16, 2012 04:02PM UTC by DominiqueF comment:13

for offsetY, I suggest:

(ev.offsetY || ev.pageY - $(ev.target).offset().top)

Changed April 16, 2012 04:04PM UTC by DominiqueF comment:14

erratum

(ev.offsetY || ev.pageY - $(ev.target).offset().top)

Changed May 14, 2012 03:43PM UTC by Dominick Pham <dominick.pham@gmail.com> comment:15

DominiqueF is right, pageX and pageY is the mouse position relative to the left and top edge of the document. OffsetX and offsetY are relative to the target element, so it's just a matter of taking the difference between absolute mouse offset and target offset.

Play nice, perform typeof check instead of truthy check since offsetX may be defined with zero. Also, cache your object lookup.

if(typeof event.offsetX === "undefined" || typeof event.offsetY === "undefined") {

var targetOffset = $(event.target).offset();

event.offsetX = event.pageX - targetOffset.left;

event.offsetY = event.pageY - targetOffset.top;

}

Changed May 14, 2012 03:45PM UTC by Dominick Pham <dominick.pham@gmail.com> comment:16

erratum is right

if(typeof event.offsetX === "undefined" || typeof event.offsetY === "undefined") {
   var targetOffset = $(event.target).offset();
   event.offsetX = event.pageX - targetOffset.left;
   event.offsetY = event.pageY - targetOffset.top;
}

Changed June 21, 2012 07:58PM UTC by rwaldron comment:17

#11951 is a duplicate of this ticket.

Changed July 03, 2012 04:17PM UTC by dmethvin comment:18

#12007 is a duplicate of this ticket.