jsイベントオブジェクトの座標5種類_javascriptスキル

しかしご存知のように、ブラウザは互換性があまりにも不調和であるだけでなく、さまざまな座標属性が目まぐるしく混乱しやすいのです。さて、要約しましょう:

テスト ブラウザ: IE8、Chrome13、FF8、Safari5、Opera11
まず、テスト ケースを見てみましょう (HTML5 doctype を使用したテスト。将来の開発も確認できます)傾向、他の doctype は自分でテストできます):

コードをコピー コードは次のとおりです:

< ;style type="text/css">
html {
background:red;
body {
background:green;
#null {
高さ:1000px;
#btn {
カーソル:デフォルト;
幅:50px; ;
行の高さ:30px;

;div id='null' >空白領域

Click

Q: ブラウザの左上隅を基準としたマウスの位置を取得する方法可視ドキュメント領域?
答え: x、y および clientX、clientY は使用できますが、x、y は IE でのドキュメントの先頭を基準としたマウスの位置を表します (つまり、スクロール バーがある場合はカウントされます) )、FF は x、y
をサポートしていません。 推奨: clientX、clientY

質問: ドキュメントの先頭を基準としたマウスの位置を取得するにはどうすればよいですか?
回答: IE: x、y を使用します (ただし、イベント ソースの親要素 (documentElement まで) が位置:相対などを設定していない場合、それ以外の場合はドキュメントではなく最も近い要素に対して相対的になります)
非 IE ：pageX、pageY の使用
LayerX、layerY も実際には可能ですが、IE と Opera はサポートしていません。
では、IE が正常な値を取得できるようにするにはどうすればよいでしょうか?回答:event.clientX document.documentElement.scrollLeft、event.clientY document.documentElement.scrollTop

Q: イベント ソースの左上隅を基準としたマウスの位置を取得する方法 (event.target| |event.srcElement)?
答え: オフセットX、オフセットY。でもFFは対応してないのですがどうすればいいでしょうか？