58

私の 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、を使用する必要があるという解決策がありました。しかし、Firebug からは、それを見つけることができませんでした。そして、私でさえ次のように試してみました：layerYoffsetXoffsetY

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でテストしています

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

編集

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

解決

$('#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);
});
4

5 に答える 5

20

Firefoxおよびその他のブラウザでlayerXおよびを使用してみてください。layerYoffsetX

イベントが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;
于 2012-10-03T08:44:17.930 に答える
14

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

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

于 2013-01-08T09:00:51.367 に答える