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は対応してないのですがどうすればいいでしょうか？

1. まず、ブラウザの表示ドキュメント領域の左上隅を基準としたマウスの位置を取得します。
2. 次に、ブラウザの表示ドキュメント領域の左上隅を基準としたイベント ソースの位置を取得します
3. 引き算して、これで終わりです。
このステップ 2 をどうやって行うのかと疑問に思う人もいるかもしれません。まあ、良い人は最後までやり遂げます！
HTMLElement.getBoundingClientRect() メソッド
戻り値は次のとおりです: {top:xx, right:xx,bottom:xx, left:xx, width:xx, height:xx}
言い換えると、要素 位置情報が与えられているので、必要なのは次のとおりです:




コードをコピーします


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


var box = (e.target || e.srcElement).getBoundingClientRect(),
offsetX = e.clientX - box.left,
offsetY = e.clientY - box.top;

テスト後、すべてのブラウザは、event.offsetX、event.offsetY と一致しています (もちろん FF は除きます)

私の例では、scrollLeft、scrollTop、clientLeft、clientTop も最初は最後に検出されました。そのうちのいくつかは悪さを引き起こす可能性があると考えられ、テスト結果は次のことを示しています:
scrollTop を除いて、その他はすべて 0 (もちろん、scrollLeft は水平スクロール バーがないためです)
ScrollTop はブラウザごとに動作が異なります
body.scrollTopの場合
IE、FF、Opera: 0
Chrome、Safari: スクロールアップ距離
documentElement.scrollTopの場合
IE、FF、Opera: スクロールアップ距離
Chrome、Safari: 0