web-dev-qa-db-ja.com

jQueryを使用したHTML5-Firefoxでe.offsetXが未定義

HTML5ページには、次のようにmousemoveイベントを持つdivがあります。

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

Google Chromeで正常に動作します。しかし、Firefoxでは、両方ともundefinedの値を提供しています。 Firebugを使用して確認しました。つまり、eオブジェクトをコンソールに記録しました。 offsetXとoffsetYの両方がundefinedであることがわかりました。

Googleで検索したときに、layerXとlayerYの両方が未定義の場合、offsetXとoffsetYを使用する必要があるという解決策がありました。しかし、Firebugからは見つけることができませんでした。そして、私もそれを次のように試してみました：

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

しかし、それはundefinedを値としても与えています。

最新のjQuery-v1.8.2を使用しています。そして、私は私のFirefox v14.0.1でテストしています

アイデアや提案はありますか？

[〜＃〜] edit [〜＃〜]

私を助けてくれたdystroyとvusanに感謝します。上記の問題の解決策は次のとおりです。

[〜＃〜] solution [〜＃〜]

$('#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);
});
jqueryhtml5eventsundefined
58
Akhilesh B Chandran

FirefoxではlayerXとlayerYを、他のブラウザではoffsetXを使用してみてください。

Jqueryでイベントが発生した場合：

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

Javascriptでイベントが発生した場合：

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

FFではlayerXとlayerYを使用し、他のすべてのブラウザーではoffsetXとoffsetYを使用します。

$('#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);
});
19
Pavel Nikolov

OriginalEventにあるため、それらは見つかりませんでした。試してください：e.originalEvent.layerX e.originalEvent.layerY

PageXとpageYについては、同じことを計算していません。 layerXは、最初の相対/絶対親からのオブジェクトの左側です。 pageXは、ページのオブジェクトの左側です。

14
Roy Shoa

これは、Firefoxなどで正常に機能します。

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

Firefoxは実際にdoessupportMouseEvent.offsetXおよびMouseEvent.offsetYリリース39.0以降。これは 2015年7月 でリリースされます。

0
Memet Olsen