Eventオブジェクトの5種類の座標
3848 ワード
マウスイベントを使用すると、イベントソースに対するマウスの位置、イベントソースオブジェクトの親要素に対するマウスの位置など、常にこのようなニーズに遭遇します.のしかし、ブラウザはあまりにも調和がとれていないことを知っています.互換性は言うまでもなく、各種の座標属性は頭がぼんやりしていて、混同しやすいです.では、まとめてみましょう.
テストブラウザ:IE 8,Chrome 13,FF 8,Safari 5,Opera 11
まずテスト例を挙げます(HTML 5のdoctypeでテストして、未来の発展傾向を見ることができて、その他のdoctypeは自分でテストすることができます):
質問:ブラウザのビジュアルドキュメント領域の左上隅に対するマウスの位置を取得するにはどうすればいいですか?
A:x,yとclientX,clientYはどちらでもいいですが、x,yはIEの下でマウスのドキュメントの先頭に対する位置を示しています(つまり、スクロールバーがあれば計算します).また、FFもx,yをサポートしていません
推荐:clientX,clientY
質問:ドキュメントの先頭に対するマウスの位置を取得するにはどうすればいいですか?
答え:IE:x,y(イベントソースの親要素(documentElementまで)を使用してposition:relativeなどが設定されていない場合、それ以外の場合、文書に対してではなく最近の要素に対して)
非IE:pageX,pageYを使用
layerX、layerYも実はできますが、IEとOperaはサポートしていません!
では、IEの正常な値を確保するにはどうすればいいのでしょうか.答え:event.clientX + document.documentElement.scrollLeft, event.clientY + document.documentElement.scrollTop
質問:イベントソース(event.target||event.src Element)の左上隅に対するマウスの位置を取得するにはどうすればいいですか?
答え:offsetX,offsetY.でもFFが応援してくれなくてどうするの?
1. まず、ブラウザのビジュアルドキュメント領域の左上隅に対するマウスの位置を取得します.
2. 次に、ブラウザのビジュアルドキュメント領域の左上隅に対するイベントソースの位置を取得します.
3. 差し引く
この2歩目はどうするのかと聞かれるかもしれません.よし、いい人は最後までやる!
HTMLElement.getBoundingClientRect()メソッド
戻り値:{top:xx,right:xx,bottom:xx,left:xx,width:xx,height:xx}
つまり、1つの要素の位置情報が与えられました.私たちがしなければならないのは、
テストにより、すべてのブラウザとevent.offsetX, event.offsettYが一致している(もちろん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
テストブラウザ:IE 8,Chrome 13,FF 8,Safari 5,Opera 11
まずテスト例を挙げます(HTML 5のdoctypeでテストして、未来の発展傾向を見ることができて、その他のdoctypeは自分でテストすることができます):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<style type="text/css">
html {
background:red;
}
body {
background:green;
}
#null {
height:1000px;
}
#btn {
cursor:default;
background:blue;
width:50px;
height:30px;
line-height:30px;
text-align:center;
}
</style>
</head>
<body>
<div id='null'> </div>
<div id="btn"> </div><!-- DIV ， -->
</body>
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById('btn');
btn.onclick = function(e){
e = e|| window.event;
var box = (e.target || e.srcElement).getBoundingClientRect(),
offsetX = e.clientX - box.left,
offsetY = e.clientY - box.top;
p('x: '+ e.x+', y: '+e.y);
p('pageX: '+ e.pageX+', pageY: '+e.pageY);
p('offsetX: '+ e.offsetX+', offsetY: '+e.offsetY);
p('FF offsetX: '+offsetX+', offsetY: '+offsetY);
p('layerX: '+ e.layerX+', layerY: '+e.layerY);
p('clientX: '+ e.clientX+', clientY: '+e.clientY);
p('body.scrollLeft: '+ document.body.scrollLeft+', body.scrollTop: '+document.body.scrollTop);
p('body.clientLeft: ' + document.body.clientLeft + ', body.clientTop: '+document.body.clientTop);
p('documentElement.scrollLeft: '+ document.documentElement.scrollLeft+', documentElement.scrollTop: '+document.documentElement.scrollTop);
p('documentElement.clientLeft: ' + document.documentElement.clientLeft + ', documentElement.clientTop: '+document.documentElement.clientTop);
}
}
function p(s){
console.log(s);
}
</script>
</html>
質問:ブラウザのビジュアルドキュメント領域の左上隅に対するマウスの位置を取得するにはどうすればいいですか?
A:x,yとclientX,clientYはどちらでもいいですが、x,yはIEの下でマウスのドキュメントの先頭に対する位置を示しています(つまり、スクロールバーがあれば計算します).また、FFもx,yをサポートしていません
推荐:clientX,clientY
質問:ドキュメントの先頭に対するマウスの位置を取得するにはどうすればいいですか?
答え:IE:x,y(イベントソースの親要素(documentElementまで)を使用してposition:relativeなどが設定されていない場合、それ以外の場合、文書に対してではなく最近の要素に対して)
非IE:pageX,pageYを使用
layerX、layerYも実はできますが、IEとOperaはサポートしていません!
では、IEの正常な値を確保するにはどうすればいいのでしょうか.答え:event.clientX + document.documentElement.scrollLeft, event.clientY + document.documentElement.scrollTop
質問:イベントソース(event.target||event.src Element)の左上隅に対するマウスの位置を取得するにはどうすればいいですか?
答え:offsetX,offsetY.でもFFが応援してくれなくてどうするの?
1. まず、ブラウザのビジュアルドキュメント領域の左上隅に対するマウスの位置を取得します.
2. 次に、ブラウザのビジュアルドキュメント領域の左上隅に対するイベントソースの位置を取得します.
3. 差し引く
この2歩目はどうするのかと聞かれるかもしれません.よし、いい人は最後までやる!
HTMLElement.getBoundingClientRect()メソッド
戻り値:{top:xx,right:xx,bottom:xx,left:xx,width:xx,height:xx}
つまり、1つの要素の位置情報が与えられました.私たちがしなければならないのは、
var box = (e.target || e.srcElement).getBoundingClientRect(),
offsetX = e.clientX - box.left,
offsetY = e.clientY - box.top;
テストにより、すべてのブラウザとevent.offsetX, event.offsettYが一致している(もちろん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