FirefoxでOfffsetX、OffsetYを実現する。 - コンピュータクワガタ

jQuery.Eventオブジェクトで持っているプロパティはpageX、pageYである。その他に、標準のeventもコピーされているので、いろいろ持っているが、それは以下のサイトが詳しい。
http://www.openspc2.org/JavaScript/Ajax/Ajax_study/chapter05/013/index.html
上記サイトで、FirefoxでoffsetX、offsetYに対応していないことが確認できる。実際に試しても動作しない。
まず、使いそうな座標指定を以下にまとめる。

プロパティ	説明
pageX pageY	ドキュメント内の相対座用を示す。
clientX clientY	表示されているウィンドウ内の座標を示す。
screenX screenY	PC等の表示している端末上の座標の絶対位置。
offsetX offsetY	イベントが発生した要素内の座標。

offsetXとoffsetYをFirefoxでも使えるようにするには、以下のようにすると同じ値が取れる。

var off = $(this).offset();
alert('offsetX=' + (e.pageX - off.left) + ' offsetY=' + (e.pageY - off.top));

簡単に試すサンプルを以下に示す。一応IE 8、Firefox 3.6、Chrome 8では動きそう。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <title>jQuery.Eventの属性3</title>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
$(function() {
    var result1 = $('#result1');
    var result2 = $('#result2');
    var result3 = $('#result3');
    var result4 = $('#result4');

    $('#div1').mousemove(function(e) {
        result1.html('pageX=' + e.pageX + ' pageY=' + e.pageY);
        result2.html('clientX=' + e.clientX + ' clientY=' + e.clientY);
        result3.html('screenX=' + e.screenX + ' screenY=' + e.screenY);
        if ($.browser.mozilla) {
            var off = $(this).offset();
            result4.html('offsetX=' + (e.pageX - off.left) + ' offsetY=' + (e.pageY - off.top));
        } else {
            result4.html('offsetX=' + e.offsetX + ' offsetY=' + e.offsetY);
        }
    });
});
  </script>
 </head>
 <body>
  <div id="div1" style="width: 1000px; height: 1000px; background-color: #ffff00; margin: 30px;">ここでマウスを動かす</div>
  <div id="result1" style="margin-left: 50px;"></div>
  <div id="result2" style="margin-left: 50px;"></div>
  <div id="result3" style="margin-left: 50px;"></div>
  <div id="result4" style="margin-left: 50px;"></div>
 </body>
</html>