javascriptはマウスの座標を獲得します.
1369 ワード
マウス座標には、x座標、y座標、クライアントに対する座標、スクリーンに対する座標などがあります.JavaScriptでは、マウス座標はイベントオブジェクトの属性として存在します.イベントオブジェクトのマウス座標に関する属性を以下に示します.
W 3 C仕様で規定されている属性
属性
説明
client X
マウスポインタは、クライアント(ブラウザドキュメント範囲)の水平座標に対応します.
client
マウスポインタは、クライアント(ブラウザドキュメント領域)の垂直座標に対応します.
screenX
マウスポインタはコンピュータの画面の水平座標に対しています.
screenY
マウスポインタはコンピュータ画面の垂直座標に対しています.
IEブラウザ特有の属性
属性
説明
オフセット
イベントが発生した場所は、イベントソース要素の座標系における水平座標です.
オフセット
イベントが発生した場所は、イベントソース要素の座標系における垂直座標です.
x
イベントが発生する位置の水平座標は、CSSで動的に位置決めされた最内層包容要素に対して発生する.
y
イベントが発生する位置の垂直座標は、CSSで動的に位置決めされた最内層包容要素に対して発生する.
【例6-1】マウスの座標情報を取得します.
W 3 C仕様で規定されている属性
属性
説明
client X
マウスポインタは、クライアント(ブラウザドキュメント範囲)の水平座標に対応します.
client
マウスポインタは、クライアント(ブラウザドキュメント領域)の垂直座標に対応します.
screenX
マウスポインタはコンピュータの画面の水平座標に対しています.
screenY
マウスポインタはコンピュータ画面の垂直座標に対しています.
IEブラウザ特有の属性
属性
説明
オフセット
イベントが発生した場所は、イベントソース要素の座標系における水平座標です.
オフセット
イベントが発生した場所は、イベントソース要素の座標系における垂直座標です.
x
イベントが発生する位置の水平座標は、CSSで動的に位置決めされた最内層包容要素に対して発生する.
y
イベントが発生する位置の垂直座標は、CSSで動的に位置決めされた最内層包容要素に対して発生する.
【例6-1】マウスの座標情報を取得します.
<html>
<head>
<title> </title>
</head>
<body>
<div id="demo"> </div>
<script type="text/javascript">
document.getElementById("demo").|| window.event;
var x = eve.clientX, // X
y = eve.clientY, // Y
x1 = eve.screenX, // X
y1 = eve.screenY; // Y
alert(
" ：
"+
"x = "+x+"
"+
"y = "+y+"
"+
" ：
"+
"x = "+x1+"
"+
"y = "+y1
);
}
</script>
</body>
</html>