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>