Event.Offsetx in Firefox

event.offsetX in Firefox

Try layerX, layerY

var x = (e.offsetX === undefined) ? e.layerX : e.offsetX;
var y = (e.offsetY === undefined) ? e.layerY : e.offsetY;

FIDDLE

Why does event.offsetX/Y provide different values in Firefox/Edge vs Chrome?

The behavior you describe as Firefox's one is the right one, since specs ask that .offsetN values are relative to the "target node".

My Chrome does by the way also expose this behavior.

But you can reproduce the one you want by dispatching a new synthetic Event based on the real one. This way all browsers will agree there is only one target node, and the .offsetN values will always be relative to it.

// static loggerconst _log = document.getElementById('_log');const log = (...vals) => { _log.textContent += vals.map(v => JSON.stringify(v)).join(' – ') + '\n';}const clearLog = () => { _log.textContent = "";}
// actual codedocument.getElementById('parent').onmousemove = function(e) {  // new true event  if(e.isTrusted) { clearLog(); }  // in case we are not the true target  if(e.target !== e.currentTarget) {    // create a synthetic event    const synth = new MouseEvent('mousemove', { clientX: e.clientX, clientY: e.clientY});    // dispatch it *synchronously* on us    e.currentTarget.dispatchEvent(synth);
    // to show it would have been wrong in FF    log('originals ', e.offsetX, e.offsetY);    return;  }  // here the values are consistent  log(e.isTrusted ? 'originals ' : 'synthetics', e.offsetX, e.offsetY);};

#_log {  background: #EEE;  height: 3em;  padding: 2px;}#parent {  border: 1px solid;  width: 400px;  height: 200px;}#child {  border: 1px solid;  transform: translate(150px, 50px);  width: 100px;  height: 100px;}

<pre id="_log"></pre><div id="parent">  <div id="child">  </div></div>

Why Firefox event.offsetX and offsetY are undefined?

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).

why offsetX and offsetY return different value in firefox and chrome

This is a known specs bug, it isn't clear how browsers should calculate this value for <svg> layout elements and we end up with inter-op issues like that.

Since you want Chrome's behavior, you can simply disable the pointer-events on your <image> element, so that the <svg> receives it directly:

let box = document.querySelector('.svg');box.addEventListener('mousemove', (e) => {  console.log(e.offsetX, e.offsetY);})

.box {  width: 300px;  overflow: auto;}.svg image {  pointer-events: none;}

<div class="box">  <svg class="svg" width="500" height="500" viewBox="0,0,600,600">    <image xlink:href="https://picsum.photos/600/600" x="0" y="0" width="600" height="600"></image>  </svg></div>

OffsetX in html5 canvas works with IE, Safari, Chrome but not with Firefox

Problem is with offsetX

e.offsetX == undefined ? e.layerX : e.offsetX;

In Firefox, event.offsetX is undefined, but in Chrome and other browsers, it gives position,
using pageX can solve your problem.

Updated Fiddle

HTML5 with jQuery - e.offsetX is undefined in Firefox

Try using layerX and layerY for Firefox and offsetX for other browser.

If event fired with jquery:

xpos = e.offsetX === undefined ? e.originalEvent.layerX : e.offsetX;
ypos = e.offsetY === undefined ? e.originalEvent.layerY : e.offsetY;

If event fired with javascript:

xpos = e.offsetX==undefined?e.layerX:e.offsetX;
ypos = e.offsetY==undefined?e.layerY:e.offsetY;

Mouse position not working for FireFox

try this : I think its not working because its not taking onmouseover function you have defined in html.

$( ".paymentTracker" ).mouseover(function(event) {

             var x = event.clientX;
var y = event.clientY;
var coords = "X coords: " + x + ", Y coords: " + y;
             alert(coords);

});

<div class="paymentTracker"></div>

 <style>
.paymentTracker {width:300px; height:300px;border:1px solid;}
 </style>

heres the fiddle : https://jsfiddle.net/0yptrjdw/

with your code

$( ".paymentTracker" ).mouseover(function(event) {
var targetOffset = $(event.target).offset();
             event.offsetX = event.pageX - targetOffset.left;
             event.offsetY = event.pageY - targetOffset.top;
             alert(event.offsetX + "   " + event.offsetY);

});

Difference between layerX and offsetX in JavaScript

offsetX/offsetY are a neat extension by Microsoft to mouse event objects, and mean the position of the mouse pointer relatively to the target element. Sadly, they're not implemented by Firefox, and there's discordance among the other browsers about what should be the origin point: IE thinks it's the content box, while Chrome, Opera and Safari the padding box (which makes more sense, since it's the same origin of absolutely positioned elements).

layerX/layerY are properties of MouseEvent objects defined by Gecko-based browsers (Firefox et al.). Some say they're substitutes for offsetX/offsetY - they're not. They're the position of the mouse relatively to the "closest positioned element", i.e. an element whose position style property is not static. That's not the target element if it's statically positioned.

They're supported by Chrome and Opera, but they (layerX/layerY) are deprecated and going to be removed soon. So forget about them.

---

Related Topics