HTML5 mit jQuery – e.offsetX ist in Firefox nicht definiert

Lesezeit: 5 Minuten

Benutzer-Avatar
Akhilesh B Chandran

In meiner HTML5-Seite habe ich ein div mit mousemove Veranstaltung wie folgt:

$('#canvas').mousemove(function(e){
    xpos = e.offsetX;
    ypos = e.offsetY;
    $('#mouse').html("X : " + xpos + " ; Y : " + ypos);
});

Mit Google Chrome funktioniert es einwandfrei. Aber in Firefox geben beide den Wert undefined. Ich habe es mit Firebug überprüft, dh protokolliert e Objekt zu Konsole. Beide offsetX und offsetY werden gefunden undefined.

Als ich in Google suchte, gab es eine Lösung, die besagte, dass ich sie verwenden sollte layerX und layerYwenn beides offsetX und offsetY sind undefiniert. Aber von Firebug konnte ich es nicht finden. Und selbst ich hatte es so versucht:

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

Aber das ist auch Geben undefined als Werte.

Ich verwende die neueste jQuery – v1.8.2. Und ich teste in meinem Firefox v14.0.1

Irgendwelche Ideen oder Vorschläge?


BEARBEITEN

Danke an Dystroy und Vusan für die Hilfe. Die Lösung für das obige Problem lautet wie folgt:

LÖSUNG

$('#canvas').mousemove(function(e){
  $('#cursor').show();
  if(e.offsetX==undefined) // this works for Firefox
  {
    xpos = e.pageX-$('#canvas').offset().left;
    ypos = e.pageY-$('#canvas').offset().top;
  }             
  else                     // works in Google Chrome
  {
    xpos = e.offsetX;
    ypos = e.offsetY;
  }
  $('#mouse').html("X : " + xpos + " ; Y : " + ypos);
});

  • Ich bin mir nicht sicher, welche Version von Google Chrome Sie verwendet haben, aber es scheint auch in Version Chrome v26 ein undefiniertes Objekt zu geben.

    – Wagen vor dem Pferd

    3. Mai 2013 um 14:05 Uhr

  • @cartbeforehorse: Ich verwende Chrome Version 26.0.1410.64 m. Und es funktioniert gut. Sehen Sie es live: jsfiddle.net/EEftW

    – Akhilesh B Chandran

    3. Mai 2013 um 18:22 Uhr

  • Ich wurde auf jeden Fall hineingezogen. Durch die Verwendung von Typoskript- und StronglyTyped-jQuery-Definitionsdateien wurde ich zu der Annahme verleitet, dass OffsetX/Y Teile von jquery waren. Ich habe nie bemerkt, dass sie optional sind und nur in bestimmten Browsern enthalten sind. Vielen Dank für Ihren Beitrag, Sie haben mir geholfen, das Problem in einem weitläufigen Durcheinander von Code zu finden.

    – fabspro

    5. Mai 2013 um 8:46 Uhr

  • Funktioniert bei mir im Firefox nicht

    – Aaronsnoswell

    1. Dezember 2013 um 10:32 Uhr

  • Dies funktioniert bei mir in Firefox 30 nicht – pageX und pageY sind immer 0

    – BT

    24. Juli 2014 um 19:21 Uhr


Benutzer-Avatar
vusan

Versuchen Sie es mit layerX und layerY für Firefox u offsetX für andere Browser.

Wenn das Ereignis mit jquery ausgelöst wird:

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

Wenn das Ereignis mit Javascript ausgelöst wird:

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

  • Danke .. Aber was ich wollte, ist relativ zu einem Container (#canvas). pageX/Y sind relativ zu <html> Element – stackoverflow.com/questions/6073505/…

    – Akhilesh B Chandran

    3. Oktober 2012 um 8:51 Uhr

  • Verwenden var xInCanvas = e.pageX-$canvas.offset().left;

    – Denys Séguret

    3. Oktober 2012 um 8:58 Uhr

  • Danke Leute. Ich habe es zum Laufen gebracht, als ich ausprobiert habe, was @dystroy vorgeschlagen hatte. Der Code lautet wie folgt: if(e.offsetX==undefined) { xpos = e.pageX-$('#canvas').offset().left; ypos = e.pageY-$('#canvas').offset().top; } else { xpos = e.offsetX; ypos = e.offsetY; } Danke nochmal Jungs 🙂

    – Akhilesh B Chandran

    3. Oktober 2012 um 9:12 Uhr

  • Sehen Sie sich diese Antwort für eine Lösung an, für die jQuery nicht erforderlich ist.

    – Zeichnete Noakes

    29. September 2013 um 22:22 Uhr

  • Obwohl pageX und pageY funktionieren, beantworten sie die Frage nicht direkt. stackoverflow.com/a/20397642/11792

    – Pawel Nikolow

    5. Dezember 2013 um 10:36 Uhr

Benutzer-Avatar
Pawel Nikolow

Verwenden layerX und layerY im FF u offsetX und offsetY in allen anderen Browsern.

$('#canvas').mousemove(function(e){
  xpos = e.offsetX === undefined ? e.originalEvent.layerX : e.offsetX;
  ypos = e.offsetY === undefined ? e.originalEvent.layerY : e.offsetY;

  $('#mouse').html("X : " + xpos + " ; Y : " + ypos);
});

  • Diese und die andere Antwort, die originalEvent angibt, benötigen mehr Upvotes. Die “beste Antwort” bietet eine Lösung, aber diese sind genauer, da layerX und layerY eher offsetX und offsetY entsprechen. Vielen Dank 🙂

    – James Hügel

    31. Juli 2014 um 21:53 Uhr

Sie haben sie nicht gefunden, weil sie im originalEvent enthalten sind. Versuchen Sie: e.originalEvent.layerX e.originalEvent.layerY

Über pageX und pageY berechnen sie nicht dasselbe. layerX ist die linke Seite des Objekts vom ersten relativen/absoluten Elternobjekt. pageX ist die linke Seite des Objekts von der Seite.

Dies funktioniert gut in Firefox und anderen.

var offsetRequired = (e.offsetX || e.pageX - $(e.target).offset().left);

Eigentlich Firefox tut Unterstützung MouseEvent.offsetX und MouseEvent.offsetY nach Version 39.0, die in veröffentlicht wird Juli 2015.

  • Aber die Werte für offsetX/Y in Firefox sind nicht dieselben wie in Chrome. Sie müssen sie umwandeln, wissen aber nicht wie.

    – schott

    12. Juli 2016 um 23:11 Uhr

  • Ich erhalte die gleichen Werte mit der neuesten Version beider Browser.

    – Memet Olsen

    13. Juli 2016 um 7:02 Uhr

  • Ich habe Chrome 49, weil mein Mac OS 10.6.8 ist. Ich kann keine neuere Version von Chrome verwenden, bis ich mein Betriebssystem aktualisiere (oder mein Chef mir einen neuen Computer kauft).

    – schott

    13. Juli 2016 um 21:34 Uhr

  • Aber die Werte für offsetX/Y in Firefox sind nicht dieselben wie in Chrome. Sie müssen sie umwandeln, wissen aber nicht wie.

    – schott

    12. Juli 2016 um 23:11 Uhr

  • Ich erhalte die gleichen Werte mit der neuesten Version beider Browser.

    – Memet Olsen

    13. Juli 2016 um 7:02 Uhr

  • Ich habe Chrome 49, weil mein Mac OS 10.6.8 ist. Ich kann keine neuere Version von Chrome verwenden, bis ich mein Betriebssystem aktualisiere (oder mein Chef mir einen neuen Computer kauft).

    – schott

    13. Juli 2016 um 21:34 Uhr

1282460cookie-checkHTML5 mit jQuery – e.offsetX ist in Firefox nicht definiert

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy