マウスイベント
マウスイベントについて試してみます。
マウスイベントの種類には以下のものがあります。
click contextmenu dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave
それぞれイベント伝播はバブリングします(mouseenter、mouseloaveは例外)。
マウスイベントの内容は以下になります。
click マウスボタンを押した後、要素をアクティブ(活性化)した時に発生 contextmenu 右クリック時のコンテキストメニューを表示 dblclick ダブルクリック時に発生 mousedown マウスボタンを押した時に発生 mouseup マウスボタンを離した時に発生 mousemove マウスを動かした時に発生 mouseover マウスが要素の上に入ったときに発生 mouseout マウスが要素の上から離れたときに発生 mouseenter マウスが要素の上から離れたときに発生(バブリング無し) mouseleave マウスが要素の上から離れたときに発生(バブリング無し)
イベントハンドラの引数のイベントオブジェクトには以下のプロパティが定義されています。
ブラウザ全体のX座標、Y座標
clientX
clientY
スクリーン(ディスプレイ)全体のX座標、Y座標
screenX
screenY
ページ全体のX座標、Y座標
縦や横に長いページで、ブラウザのスクロールが最下部にある場合でも、
ページの左上を基点として座標を取得します。
pageX
pageY
要素のX座標、Y座標(※)
offsetX
offsetY
※…要素が親＋子＋孫でネストされている場合は、
親要素に登録したイベントハンドラがイベント伝播します。
マウスが孫要素の上にある場合は、その孫要素のX座標、Y座標になります。
実際に簡単なサンプルを書いて試してみます。
イベントの登録は「DOM要素プロパティにイベントハンドラを登録する」方法で書いていますが、
これは実際には他の方法でイベントハンドラを登録する方法もあります。(後述します)
以下のHTMLを用意しました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<div id="test1" style="width: 5000px; height: 5000px;">
<div style="position:fixed; top:10px;">
<div>clientX ：<span id="client_x"></span></div>
<div>clientY ：<span id="client_y"></span></div>
<div>screenX：<span id="screen_x"></span></div>
<div>screenY：<span id="screen_y"></span></div>
<div>pageX：<span id="page_x"></span></div>
<div>pageY：<span id="page_y"></span></div>
<div>offsetX：<span id="offset_x"></span></div>
<div>offsetY：<span id="offset_y"></span></div>
</div>
</div>
<script type="text/javascript">
// 方法① DOM要素プロパティにイベントハンドラを登録する
let element_test1 = document.getElementById("test1");
element_test1.onmousemove = function(event) {
// イベントオブジェクトから座標を取得
let client_x = event.clientX;
let client_y = event.clientY;
let screen_x = event.screenX;
let screen_y = event.screenY;
let page_x = event.pageX;
let page_y = event.pageY;
let offset_x = event.offsetX;
let offset_y = event.offsetY;
// x座標出力用の要素を取得
let ele_client_x = document.getElementById("client_x");
let ele_client_y = document.getElementById("client_y");
let ele_screen_x = document.getElementById("screen_x");
let ele_screen_y = document.getElementById("screen_y");
let ele_page_x = document.getElementById("page_x");
let ele_page_y = document.getElementById("page_y");
let ele_offset_x = document.getElementById("offset_x");
let ele_offset_y = document.getElementById("offset_y");
// 要素を更新する
ele_client_x.innerHTML = client_x;
ele_client_y.innerHTML = client_y;
ele_screen_x.innerHTML = screen_x;
ele_screen_y.innerHTML = screen_y;
ele_page_x.innerHTML = page_x;
ele_page_y.innerHTML = page_y;
ele_offset_x.innerHTML = offset_x;
ele_offset_y.innerHTML = offset_y;
};
</script>
</body>
</html>
画面にアクセスすると、画面上には
clientX ：130 clientY ：190 screenX：594 screenY：545 pageX：130 pageY：690 offsetX：122 offsetY：682 ※・・・数値は、サンプル用のダミーです。
のように各プロパティに応じた、マウスカーソル位置のX座標、Y座標が表示されます。
この例では、pageX、pageYの値を確認しやすいように、サンプル用にHTMLドキュメントのdivタグを
<div id="test1" style="width: 5000px; height: 5000px;">
というように大きく領域をとっています。
画面の下、あるいは右方向に大きくスクロールをして、
pageXとpageYを確認すると、「ページ全体から」のX座標、Y座標を取得していることがわかります。
(offsetX、offsetYもそうですが、これは要素を基準にしているので、別な考え方をします)
また、clientX、clientY、screenX、screenYの値がスクロールしても、
常に「ブラウザ全体」「スクリーン(ディスプレイ)全体」からの座標を取得していることがわかります。
プロパティの違いにより、取得できる値が異なるのでプログラミングする際には注意が必要です。
また、addEventListenerでイベントハンドラを登録する方法も試してみます。
以下のHTMLを用意しました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<div id="test1" style="width: 5000px; height: 5000px;">
<div style="position:fixed; top:10px;">
<div>clientX ：<span id="client_x"></span></div>
<div>clientY ：<span id="client_y"></span></div>
<div>screenX：<span id="screen_x"></span></div>
<div>screenY：<span id="screen_y"></span></div>
<div>pageX：<span id="page_x"></span></div>
<div>pageY：<span id="page_y"></span></div>
<div>offsetX：<span id="offset_x"></span></div>
<div>offsetY：<span id="offset_y"></span></div>
</div>
</div>
<script type="text/javascript">
// 方法② addEventListenerメソッドでイベントハンドラを登録する
document.getElementById('test1').addEventListener('mousemove', function(e) {
// イベントオブジェクトから座標を取得
let client_x = event.clientX;
let client_y = event.clientY;
let screen_x = event.screenX;
let screen_y = event.screenY;
let page_x = event.pageX;
let page_y = event.pageY;
let offset_x = event.offsetX;
let offset_y = event.offsetY;
// x座標出力用の要素を取得
let ele_client_x = document.getElementById("client_x");
let ele_client_y = document.getElementById("client_y");
let ele_screen_x = document.getElementById("screen_x");
let ele_screen_y = document.getElementById("screen_y");
let ele_page_x = document.getElementById("page_x");
let ele_page_y = document.getElementById("page_y");
let ele_offset_x = document.getElementById("offset_x");
let ele_offset_y = document.getElementById("offset_y");
// 要素を更新する
ele_client_x.innerHTML = client_x;
ele_client_y.innerHTML = client_y;
ele_screen_x.innerHTML = screen_x;
ele_screen_y.innerHTML = screen_y;
ele_page_x.innerHTML = page_x;
ele_page_y.innerHTML = page_y;
ele_offset_x.innerHTML = offset_x;
ele_offset_y.innerHTML = offset_y;
});
</script>
</body>
</html>
画面にアクセスすると、画面上にはtest1.htmlと同様の結果になることがわかります。
注意が必要な点は、
addEventListenerの時には、イベントハンドラ登録は「mousemove」と書きましたが、
DOM要素へのイベントハンドラ登録は「onmousemove」と書いている点です。