Bug Tracker

Ticket #8523 (closed bug: wontfix)

Opened 4 years ago

Last modified 2 years ago

offsetX and offsetY undefined in Firefox 4

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

Description

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

Change History

comment:1 Changed 4 years ago by rwaldron

  • Owner set to fnordfish@…
  • Status changed from new to pending
  • Component changed from unfiled to offset

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.

comment:2 Changed 4 years ago by fnordfish@…

  • Status changed from pending to new

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.

comment:3 Changed 4 years ago by dmethvin

 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?

Last edited 4 years ago by dmethvin (previous) (diff)

comment:4 Changed 4 years ago by dmethvin

  • Status changed from new to pending

comment:5 Changed 4 years ago by fnordfish@…

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

comment:6 Changed 4 years ago by dmethvin

  • Status changed from pending to closed
  • Resolution set to wontfix

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.

comment:7 Changed 4 years ago by microry

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;

comment:8 Changed 3 years ago by VIPStephan

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)

comment:9 Changed 3 years ago by anonymous

please, add offsetX/Y for Firefox in Event object

comment:10 Changed 3 years ago by anonymous

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)

comment:11 Changed 3 years ago by anonymous

I use the approach below:

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

comment:12 Changed 3 years ago by RonnyO

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.

comment:13 Changed 3 years ago by DominiqueF

for offsetY, I suggest:

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

comment:14 Changed 3 years ago by DominiqueF

erratum

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

comment:15 Changed 3 years ago by Dominick Pham <dominick.pham@…>

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;

}

comment:16 Changed 3 years ago by Dominick Pham <dominick.pham@…>

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

comment:17 Changed 3 years ago by rwaldron

#11951 is a duplicate of this ticket.

comment:18 Changed 2 years ago by dmethvin

#12007 is a duplicate of this ticket.

Note: See TracTickets for help on using tickets.