マウスポインタの座標を表示する
サンプルソース
|
<body onmousemove="move_sub()"> <script language="Javascript"> <!-- function move_sub() { document.all.txt1.value=event.screenX + "," + event.screenY; document.all.txt2.value=event.clientX + "," + event.clientY; document.all.txt3.value=event.x + "," + event.y; document.all.txt4.value=event.offsetX + "," + event.offsetY; } --> </script> スクリーン上の座標･･･<input type="text" id=txt1><br> クライアント領域の座標･･･<input type="text" id=txt2><br> 配置された親要素上の座標･･･<input type="text" id=txt3><br> クリックした要素上の座標･･･<input type="text" id=txt4><br> |
解説
マウスポインタを動かしたときのイベントはeventです。eventからマウスポインタの座標を取得できます。
event.screenX･･･スクリーン上のX座標
event.screenY･･･スクリーン上のY座標
event.clientX･･･クライアント領域（ウィンドウ）上のX座標
event.clientY･･･クライアント領域（ウィンドウ）上のY座標
event.x･･･配置された親要素（通常は BODY 要素）上のX座標
event.y･･･配置された親要素（通常は BODY 要素）上のY座標
event.offsetX ･･･クリックした要素上のY座標
event.offsetY ･･･クリックした要素上のY座標
サンプル
関連する内容