マウスカーソルの座標を調べる
■マウスカーソルの座標を調べる
マウスカーソルの座標を取得するには、onmousemove イベントを使用します。
このイベントは、マウスカーソルが移動するたびに呼び出されます。
マウスカーソルを移動するたびに実行されるイベント
// マウスカーソルを移動するたびに実行されるイベント
document.onmousemove = function(e){
}
登録した関数の引数から MouseEvent オブジェクトが得られます。MouseEvent オブジェクトには以下のプロパティがあります。
| プロパティ | 解説 |
| clientX | ブラウザのクライアント領域を原点とした x 座標 |
| clientY | ブラウザのクライアント領域を原点とした y 座標 |
| screenX | モニタのスクリーン領域を原点とした x 座標 |
| screenY | モニタのスクリーン領域を原点とした y 座標 |
これらの値は、ブラウザの「拡大/縮小の設定」に応じてスケーリングされます。
例えば、表示を 50% にした場合、得られる値は 2 倍になります。
■クライアント領域を原点としたマウスカーソルの座標を調べる
ブラウザのクライアント領域を原点としたマウスの座標を調べるには、
MouseEvent オブジェクトのプロパティである clientX と clientY を使用します。
MouseEvent オブジェクトのプロパティである clientX と clientY を使用します。
クライアント領域のマウス座標を取得する
// マウスカーソルを移動する度に実行されるイベント
document.onmousemove = function(e){
// InternetExplorer用
if(!e) e = window.event;
// クライアント領域のマウスの座標を取得
console.log(e.clientX); // x 座標
console.log(e.clientY); // y 座標
}
■スクリーン領域を原点としたマウスカーソルの座標を調べる
モニタのスクリーン領域を原点としたマウスの座標を調べるには、
MouseEvent オブジェクトのプロパティである screenX と screenY を使用します。
MouseEvent オブジェクトのプロパティである screenX と screenY を使用します。
クライアント領域のマウス座標を取得する
// マウスカーソルを移動する度に実行されるイベント
document.onmousemove = function(e){
// InternetExplorer用
if(!e) e = window.event;
// スクリーン領域のマウスの座標を取得
console.log(e.screenX); // x 座標
console.log(e.screenY); // y 座標
}
■イベントリスナーを使用する
onmousemove イベントは、１つの関数しか登録できません。
複数の関数を登録するには、mousemove イベントリスナーを使用します。
mousemove イベントリスナーを使用する
// 「document」の「mousemove イベント」に関数を登録する(その1)
ElementAddEventListener(document,"mousemove",function(e){
console.log("関数1 x:" + e.clientX + " y:" + e.clientY);
},true);
// 「document」の「mousemove イベント」に関数を登録する(その2)
ElementAddEventListener(document,"mousemove",function(e){
console.log("関数2 x:" + e.clientX + " y:" + e.clientY);
},true);
// 「document」の「mousemove イベント」に関数を登録する(その3)
ElementAddEventListener(document,"mousemove",function(e){
console.log("関数3 x:" + e.clientX + " y:" + e.clientY);
},true);
// ------------------------------------------------------------
// DOM オブジェクトのイベントに関数を登録する
//
// 第01引数 対象の DOM オブジェクト
// 第02引数 イベント名
// 第03引数 イベント発生時に実行されるコールバック関数
// 第04引数 キャプチャリングフェーズなら true、バブリングフェーズなら false
// 返り値 成功すれば true、失敗すれば false
// ------------------------------------------------------------
function ElementAddEventListener(element,event,func,phase){
if(!element) return false;
if(element.addEventListener){
element.addEventListener(event,func,phase);
return true;
}
if(element.attachEvent){
element.attachEvent("on" + event,func);
return true;
}
return false;
}
// ------------------------------------------------------------
// DOM オブジェクトのイベントに登録した関数を解除する
//
// 第01引数 対象の DOM オブジェクト
// 第02引数 イベント名
// 第03引数 イベント発生時に実行されるコールバック関数
// 第04引数 キャプチャリングフェーズなら true、バブリングフェーズなら false
// 返り値 成功すれば true、失敗すれば false
// ------------------------------------------------------------
function ElementRemoveEventListener(element,func,phase){
if(!element) return false;
if(element.removeEventListener){
element.removeEventListener(event,func,phase);
return true;
}
if(element.detachEvent){
element.detachEvent("on" + event,func);
return true;
}
return false;
}
マウスがクリックされたか調べる
■マウスの左ボタンが押されたか調べる
マウスの左ボタンが押されたか調べるには、onmousedown イベントを使用します。
このイベントは、マウスの左ボタンが押されるたびに呼び出されます。
マウスの左ボタンを押すと実行されるイベント
// マウスの左ボタンを押すと実行されるイベント
document.onmousedown = function(e){
}
■マウスの左ボタンが離されたか調べる
マウスの左ボタンが離されたか調べるには、onmouseup イベントを使用します。
このイベントは、マウスの左ボタンが離されるたびに呼び出されます。
マウスの左ボタンを離すと実行されるイベント
// マウスの左ボタンを離すと実行されるイベント
document.onmouseup = function(e){
}
マウスのホイールが回転されたか調べる
■マウスのホイールが回転されたか調べる
マウスのホイールの回転を取得するには、onmousewheel イベントを使用します。
このイベントは、マウスホイールを回転するたびに呼び出されます。
FireFox（3.6.10 時点）では動作しません。
マウスホイールを回転すると実行されるイベント
// マウスホイールを回転すると実行されるイベント
document.onmousewheel = function(e){
}
登録した関数の引数から WheelEvent オブジェクトが得られます。WheelEvent オブジェクトには以下のプロパティがあります。
| プロパティ | 解説 |
| wheelDelta | マウスホイールの回転量。120 ずつ増減。 正の値で上方向に回転、負の値で下方向に回転。 |
取得例です。
マウスホイールの回転量を調べる
// マウスホイールが回転したときに呼び出されるイベント
document.onmousewheel = function(e){
// InternetExplorer用
if(!e) e = window.event;
// 回転量
var delta = e.wheelDelta / 120;
console.log(delta);
}
■イベントリスナーを使用する
マウスのホイールの回転をイベントリスナーを使って調べるには、mousewheel イベントを使用します。
登録した関数の引数から WheelEvent オブジェクトが得られます。
イベントリスナーを使ってマウスホイールの回転量を調べる
// マウスホイールが回転したときに呼び出されるイベント
window.addEventListener("mousewheel", function (e) {
// 回転量
var delta = e.wheelDelta / 120;
console.log(delta);
}, false);
FireFox（3.6.10 時点）の場合は、DOMMouseScroll イベントを使用します。
登録した関数の引数から MouseScrollEvent オブジェクトが得られます。MouseScrollEvent オブジェクトには以下のプロパティがあります。
| プロパティ | 解説 |
| detail | マウスホイールの回転量。3 ずつ増減。 正の値で下方向に回転、負の値で上方向に回転。 |
取得例です。
イベントリスナーを使ってマウスホイールの回転量を調べる - FireFox（3.6.10 時点）用
// マウスホイールが回転したときに呼び出されるイベント
window.addEventListener("DOMMouseScroll", function (e) {
// 回転量
var delta = -e.detail / 3;
console.log(delta);
}, false);
マウスカーソルを作成する
■画像をマウスカーソル位置に追従させる
カーソル用の画像を、常にマウスカーソルの位置に表示する事で、マウスカーソルを実現します。
■マウスカーソルのイメージを用意する
Image クラスをインスタンス化して、イメージエレメントを作成します。
イメージエレメントを作成
// イメージのエレメントを作成
var img = new Image();
src プロパティに画像の URL を指定すると、その画像の読み込みを開始します。
画像の読み込みを開始
// イメージのエレメントを作成
var img = new Image();
// 画像の URL を指定
img.src = "http://hakuhin.jp/cursor.png";
appendChild() メソッドを使用して body に配置します。
body に配置
// イメージのエレメントを作成
var img = new Image();
// 画像の URL を指定
img.src = "http://hakuhin.jp/cursor.png";
// body に配置
document.body.appendChild(img);
スタイルシートの position を "fixed" に変更します。
body に配置
// イメージのエレメントを作成
var img = new Image();
// 画像の URL を指定
img.src = "http://hakuhin.jp/cursor.png";
// body に配置
document.body.appendChild(img);
// position を "fixed" に設定
img.style.position = "fixed";
■マウス座標をムービークリップの座標に反映する
マウスカーソルが移動したか調べるには、onmousemove イベントを使用します。
引数から、クライアント領域のマウスカーソルを取得できます。
イメージエレメントの x 座標を更新するには、スタイルシートの left を変更します。
y 座標を更新するには、スタイルシートの top を変更します。
マウスカーソルの座標を調べる
// マウスカーソルが移動したときに呼び出されるイベント
document.onmousemove = function(e){
// InternetExplorer用
if(!e) e = window.event;
// イメージエレメントの座標を更新
img.style.left = e.clientX + "px";
img.style.top = e.clientY + "px";
});
問答収集
