MouseMoveイベントのコードと実行結果を紹介します。
要素内でマウスポインタの移動を検出する際には、MouseMoveイベントを利用します。
以下のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
window.onload = function onLoad() {
var ma = document.getElementById("MouseArea");
ma.addEventListener('mousemove', OnMouseMove, false);
}
function OnMouseMove(e) {
var msg1 = document.getElementById("message1");
var msg2 = document.getElementById("message2");
var msg3 = document.getElementById("message3");
var msg4 = document.getElementById("message4");
msg1.innerHTML = "Client:" + e.clientX + "," + e.clientY;
msg2.innerHTML = "Page :" + e.pageX + "," + e.pageY;
msg3.innerHTML = "Offset:" + e.offsetX + "," + e.offsetY;
msg4.innerHTML = "Screen:" + e.screenX + "," + e.screenY;
}
</script>
<style>
.ContentFrame {
display:flex;
}
.canvas {
border: solid 1px #0094ff;
background-color: #e1e1e1;
width: 400px;
height: 400px;
}
.MessageFrame {
border:1px solid #808080;
width:400px;
}
</style>
</head>
<body>
<h1>MouseMoveイベントのデモ</h1>
<div class="ContentFrame">
<div id="MouseArea" class="canvas">領域</div>
<div class="MessageFrame">
<div id="message1"></div>
<div id="message2"></div>
<div id="message3"></div>
<div id="message4"></div>
</div>
</div>
</body>
</html>
ページ読み込み時に、以下のJavaScriptを実行します。id="MouseArea"の要素を取得し、
addEventListener()メソッドを呼び出し、mousemoveイベントを設定します。
window.onload = function onLoad() {
var ma = document.getElementById("MouseArea");
ma.addEventListener('mousemove', OnMouseMove, false);
}
MouseAreaでマウスポインタが移動すると以下のOnMouseMove関数が呼び出されます。
message1,message2,message3.message4 の各要素にマウスポインタの座標を表示します。
function OnMouseMove(e) {
var msg1 = document.getElementById("message1");
var msg2 = document.getElementById("message2");
var msg3 = document.getElementById("message3");
var msg4 = document.getElementById("message4");
msg1.innerHTML = "Client:" + e.clientX + "," + e.clientY;
msg2.innerHTML = "Page :" + e.pageX + "," + e.pageY;
msg3.innerHTML = "Offset:" + e.offsetX + "," + e.offsetY;
msg4.innerHTML = "Screen:" + e.screenX + "," + e.screenY;
}
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
[領域]の灰色の枠内にマウスポインタが入ると、右側のエリアにマウスポインタの座標が表示されます。
