jQueryのMOuseMoveイベントを利用します。
書式
(セレクタ).mousemove(イベント実行関数)
または
(セレクタ).mousemove(function((引数)){
...クリック時に実行する処理
})
と記述します。
座標
マウスポインタの座標は、mousemoveイベントにより呼び出される関数の引数に与えられます。
- clientX, clientY
- pageX, pageY
- offsetX, offsetY
- screenX, screenY
のプロパティでアクセスできます。
コード
以下のコードを記述します。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript" src="jquery-2.0.3.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("div.canvas").mousemove(function (e) {
$("div#message1").html("Client:" + e.clientX+","+e.clientY);
$("div#message2").html("Page :" + e.pageX + "," + e.pageY);
$("div#message3").html("Offset:" + e.offsetX + "," + e.offsetY);
$("div#message4").html("Screen:" + e.screenX + "," + e.screenY);
})
})
</script>
<style>
.canvas {
border: solid 1px #0094ff;
background-color: #e1e1e1;
width: 400px;
height: 800px;
}
.MessageFrame{
left:420px;
top:16px;
position:fixed;
}
</style>
</head>
<body>
<div class="canvas">領域</div>
<div class="MessageFrame">
<div id="message1"></div>
<div id="message2"></div>
<div id="message3"></div>
<div id="message4"></div>
</div>
</body>
</html>
実行結果
上記のHTMLファイルを表示するを下図の表示結果となります。
[領域]の枠内にマウスポインタが入ると枠の右側に座標値が表示されます。Client,Pageは表示画面(ページ)の左上を原点としたときのマウスポインタの座標値が表示されます。Offsetは[領域]の枠の左上を原点した時の座標値が表示されます。ScreenはPCの画面の左上を原点とした時の座標値を表示します。
ページを縦方向にスクロールして、[領域]の枠内にマウスポインタを入れます。Clientは表示されているページの左上を原点とした時の座標値が表示されますが、Pageはスクロールで隠れてしまったページの先頭の左上を原点とした時の座標値を表示しています。Offset,Screenは先と同様です。Offsetは枠の左上を原点としているためスクロールで見えなくなっている部分が原点になっています。
著者
iPentecのプログラマー、最近はAIの積極的な活用にも取り組み中。
とっても恥ずかしがり。
最終更新日: 2024-01-06
作成日: 2013-12-27
