JavaScript プログラミング講座

 

マウスカーソルの座標を調べる

 
 
 

■マウスカーソルの座標が変化したか監視する

 
onmousemove イベントを使用します。
 
登録したコールバック関数の引数から、MouseEvent オブジェクトが得られます。
 
マウスを移動するたびに実行されるイベント

// ------------------------------------------------------------
// マウスを移動するたびに実行されるイベント
// ------------------------------------------------------------
document.onmousemove = function (e){
	if(!e) e = window.event; // レガシー

	// 出力テスト
	console.log(e);
};
 
■マウス座標関連のプロパティ
 
プロパティ 解説
clientX Number ブラウザのクライアント領域を原点とした水平位置( x 座標)
clientY Number ブラウザのクライアント領域を原点とした垂直位置( y 座標)
screenX Number モニタのスクリーン領域を原点とした水平位置( x 座標)
screenY Number モニタのスクリーン領域を原点とした垂直位置( y 座標)
 

■クライアント座標系を基点としたマウスカーソルの座標を取得する


■クライアント座標系とは?
 
ブラウザにて HTML がレンダリング表示される領域の、左上を原点とした座標系です。
 
 
■マウスカーソルの座標を取得する(クライアント座標系)
 
プロパティ 解説
clientX Number ブラウザのクライアント領域を原点とした水平位置( x 座標)
clientY Number ブラウザのクライアント領域を原点とした垂直位置( y 座標)
 
■取得例(イベントリスナー)
 
クライアント座標系を基点としたマウスカーソルの座標を取得する

// ------------------------------------------------------------
// マウスを移動するたびに実行される関数
// ------------------------------------------------------------
function MouseMoveFunc(e){

	// クライアント座標系を基点としたマウスカーソルの座標を取得
	var mouse_x = e.clientX;
	var mouse_y = e.clientY;

	// 出力テスト
	console.log("x:" + mouse_x);
	console.log("y:" + mouse_y);
}


// ------------------------------------------------------------
// イベントのリッスンを開始する
// ------------------------------------------------------------
// イベントリスナーに対応している
if(document.addEventListener){

	// マウスを移動するたびに実行されるイベント
	document.addEventListener("mousemove" , MouseMoveFunc);

// アタッチイベントに対応している
}else if(document.attachEvent){

	// マウスを移動するたびに実行されるイベント
	document.attachEvent("onmousemove" , MouseMoveFunc);

}
 
■取得例(イベントプロパティ)
 
クライアント座標系を基点としたマウスカーソルの座標を取得する

// ------------------------------------------------------------
// マウスを移動するたびに実行されるイベント
// ------------------------------------------------------------
document.onmousemove = function (e){
	if(!e) e = window.event; // レガシー

	// クライアント座標系を基点としたマウスカーソルの座標を取得
	var mouse_x = e.clientX;
	var mouse_y = e.clientY;

	// 出力テスト
	console.log("x:" + mouse_x);
	console.log("y:" + mouse_y);
};
 

■グローバル座標系を基点としたマウスカーソルの座標を取得する


■グローバル座標系とは?
 
HTML 全体の、左上を原点とした座標系です。
 
1.マウスカーソルの座標を取得する(クライアント座標系)
 
こちらで解説しています。
 
2.ブラウザのスクロール位置を取得する
 
こちらで解説しています。
 
3.グローバル座標系に変換する
 
「クライアント座標」と「スクロール位置」を加算します。
 
すると、「グローバル座標」に変換できます。
 
■取得例(イベントリスナー)
 
クライアント座標系を基点としたマウスカーソルの座標を取得する

// ------------------------------------------------------------
// スクロール位置を取得する関数
// ------------------------------------------------------------
function DocumentGetScrollPosition(document_obj){
	return{
		x:document_obj.body.scrollLeft || document_obj.documentElement.scrollLeft,
		y:document_obj.body.scrollTop  || document_obj.documentElement.scrollTop
	};
}


// ------------------------------------------------------------
// マウスを移動するたびに実行される関数
// ------------------------------------------------------------
function MouseMoveFunc(e){

	// クライアント座標系を基点としたマウスカーソルの座標を取得
	var mouse_x = e.clientX;
	var mouse_y = e.clientY;

	// スクロール位置を取得
	var scroll_pos = DocumentGetScrollPosition(document);

	// スクロール位置を加算して、グローバル座標系に変換する
	mouse_x += scroll_pos.x;
	mouse_y += scroll_pos.y;

	// 出力テスト
	console.log("x:" + mouse_x);
	console.log("y:" + mouse_y);
}


// ------------------------------------------------------------
// イベントのリッスンを開始する
// ------------------------------------------------------------
// イベントリスナーに対応している
if(document.addEventListener){

	// マウスを移動するたびに実行されるイベント
	document.addEventListener("mousemove" , MouseMoveFunc);

// アタッチイベントに対応している
}else if(document.attachEvent){

	// マウスを移動するたびに実行されるイベント
	document.attachEvent("onmousemove" , MouseMoveFunc);

}
 
■取得例(イベントプロパティ)
 
クライアント座標系を基点としたマウスカーソルの座標を取得する

// ------------------------------------------------------------
// スクロール位置を取得する関数
// ------------------------------------------------------------
function DocumentGetScrollPosition(document_obj){
	return{
		x:document_obj.body.scrollLeft || document_obj.documentElement.scrollLeft,
		y:document_obj.body.scrollTop  || document_obj.documentElement.scrollTop
	};
}


// ------------------------------------------------------------
// マウスを移動するたびに実行されるイベント
// ------------------------------------------------------------
document.onmousemove = function (e){
	if(!e) e = window.event; // レガシー

	// クライアント座標系を基点としたマウスカーソルの座標を取得
	var mouse_x = e.clientX;
	var mouse_y = e.clientY;

	// スクロール位置を取得
	var scroll_pos = DocumentGetScrollPosition(document);

	// スクロール位置を加算して、グローバル座標系に変換する
	mouse_x += scroll_pos.x;
	mouse_y += scroll_pos.y;

	// 出力テスト
	console.log("x:" + mouse_x);
	console.log("y:" + mouse_y);
};
 

■スクリーン座標系を基点としたマウスカーソルの座標を取得する


■スクリーン座標系とは?
 
モニタ(デスクトップ)全体の、左上を原点とした座標系です。
 
 
■マウスカーソルの座標を取得する(スクリーン座標系)
 
プロパティ 解説
screenX Number モニタのスクリーン領域を原点とした水平位置( x 座標)
screenY Number モニタのスクリーン領域を原点とした垂直位置( y 座標)
 
■取得例(イベントリスナー)
 
スクリーン座標系を基点としたマウスカーソルの座標を取得する

// ------------------------------------------------------------
// マウスを移動するたびに実行される関数
// ------------------------------------------------------------
function MouseMoveFunc(e){

	// スクリーン座標系を基点としたマウスカーソルの座標を取得
	var mouse_x = e.screenX;
	var mouse_y = e.screenY;

	// 出力テスト
	console.log("x:" + mouse_x);
	console.log("y:" + mouse_y);
}


// ------------------------------------------------------------
// イベントのリッスンを開始する
// ------------------------------------------------------------
// イベントリスナーに対応している
if(document.addEventListener){

	// マウスを移動するたびに実行されるイベント
	document.addEventListener("mousemove" , MouseMoveFunc);

// アタッチイベントに対応している
}else if(document.attachEvent){

	// マウスを移動するたびに実行されるイベント
	document.attachEvent("onmousemove" , MouseMoveFunc);

}
 
■取得例(イベントプロパティ)
 
スクリーン座標系を基点としたマウスカーソルの座標を取得する

// ------------------------------------------------------------
// マウスを移動するたびに実行されるイベント
// ------------------------------------------------------------
document.onmousemove = function (e){
	if(!e) e = window.event; // レガシー

	// スクリーン座標系を基点としたマウスカーソルの座標を取得
	var mouse_x = e.screenX;
	var mouse_y = e.screenY;

	// 出力テスト
	console.log("x:" + mouse_x);
	console.log("y:" + mouse_y);
};
 



 

マウスカーソルが移動したか調べる

 
 
 


■マウスの移動関連のイベントについて


マウスの移動関連のイベントは、以下の種類があります。
 
イベント名 解説
onmousemove MouseEvent マウスカーソルが、任意のエレメントの上を移動した
onmouseover MouseEvent マウスカーソルが、任意のエレメントの外から内側へ侵入した
onmouseout MouseEvent マウスカーソルが、任意のエレメントの内側から外へ撤退した
 

■マウスカーソルが移動したか監視する


onmousemove イベントを使用します。
 
登録したコールバック関数の引数から、MouseEvent オブジェクトが得られます。
 
マウスカーソルが移動するたびに実行されるイベント

// ------------------------------------------------------------
// マウスカーソルが移動するたびに実行されるイベント
// ------------------------------------------------------------
document.onmousemove = function (e){
	if(!e) e = window.event; // レガシー

	// 出力テスト
	console.log(e);
};
 
■任意のエレメントにリスナーを登録した場合
 
検出範囲は、任意の要素とその子孫に限定されます。
 
マウスカーソルと要素が重なっているとき、イベントが発行されます。
 
任意のエレメントにコールバック関数を登録する

<html>
  <body>

    <div id="aaa" style="width:300px; height:200px; background:#f44; border:5px #a00 solid;" ></div>

    <script type="text/javascript">
    <!--
	// id 属性が、"aaa" であるエレメントを取得
	var element = document.getElementById("aaa");

	// ------------------------------------------------------------
	// マウスカーソルが移動するたびに実行されるイベント
	// ------------------------------------------------------------
	element.onmousemove = function (e){
		if(!e) e = window.event; // レガシー

		alert("マウスカーソルが移動した");
	};
    //-->
    </script>

  </body>
</html>
 
■パフォーマンス低下に注意
 
onmousemove イベントは、高頻度の時間隔で発行されます。
 
コールバック関数内では、マウス情報の取得に留めた方がいいでしょう。
 
重い処理を記述した場合、パフォーマンス低下を引き起こす恐れがあります。
 
■取得例(イベントリスナー)
 
マウスカーソルが移動したか調べる

// ------------------------------------------------------------
// マウスカーソルが移動するたびに実行される関数
// ------------------------------------------------------------
function MouseMoveFunc(e){
	console.log("マウスカーソルが移動した");
}


// ------------------------------------------------------------
// イベントのリッスンを開始する
// ------------------------------------------------------------
// イベントリスナーに対応している
if(document.addEventListener){

	// マウスカーソルが移動するたびに実行されるイベント
	document.addEventListener("mousemove" , MouseMoveFunc);

// アタッチイベントに対応している
}else if(document.attachEvent){

	// マウスカーソルが移動するたびに実行されるイベント
	document.attachEvent("onmousemove" , MouseMoveFunc);

}
 
■取得例(イベントプロパティ)
 
マウスカーソルが移動したか調べる

// ------------------------------------------------------------
// マウスカーソルが移動するたびに実行されるイベント
// ------------------------------------------------------------
document.onmousemove = function (e){
	if(!e) e = window.event; // レガシー

	console.log("マウスカーソルが移動した");
};
 

■マウスオーバーしたか監視する

 
■マウスオーバー操作とは?
 
対象の外側から内側へ、マウスカーソルが侵入移動した瞬間に該当します。
 
■マウスオーバーしたか監視する
 
onmouseover イベントを使用します。
 
登録したコールバック関数の引数から、MouseEvent オブジェクトが得られます。
 
マウスオーバー時に実行されるイベントイベント

// ------------------------------------------------------------
// マウスオーバー時に実行されるイベント
// ------------------------------------------------------------
document.onmouseover = function (e){
	if(!e) e = window.event; // レガシー

	// 出力テスト
	console.log(e);
};
 
■任意のエレメントにリスナーを登録した場合
 
検出範囲は、任意の要素とその子孫に限定されます。
 
任意のエレメントにコールバック関数を登録する

<html>
  <body>

    <div id="aaa" style="width:300px; height:200px; background:#f44; border:5px #a00 solid;" ></div>

    <script type="text/javascript">
    <!--
	// id 属性が、"aaa" であるエレメントを取得
	var element = document.getElementById("aaa");

	// ------------------------------------------------------------
	// マウスオーバー時に実行されるイベント
	// ------------------------------------------------------------
	element.onmouseover = function (e){
		if(!e) e = window.event; // レガシー

		alert("マウスオーバー");
	};
    //-->
    </script>

  </body>
</html>
 
■取得例(イベントリスナー)
 
マウスオーバーしたか調べる

// ------------------------------------------------------------
// マウスオーバー時に実行される関数
// ------------------------------------------------------------
function MouseOverFunc(e){
	console.log("マウスオーバー");
}


// ------------------------------------------------------------
// イベントのリッスンを開始する
// ------------------------------------------------------------
// イベントリスナーに対応している
if(document.addEventListener){

	// マウスオーバー時に実行されるイベント
	document.addEventListener("mouseover" , MouseOverFunc);

// アタッチイベントに対応している
}else if(document.attachEvent){

	// マウスオーバー時に実行されるイベント
	document.attachEvent("onmouseover" , MouseOverFunc);

}
 
■取得例(イベントプロパティ)
 
マウスオーバーしたか調べる

// ------------------------------------------------------------
// マウスオーバー時に実行されるイベント
// ------------------------------------------------------------
document.onmouseover = function (e){
	if(!e) e = window.event; // レガシー

	console.log("マウスオーバー");
};
 

■マウスアウトしたか監視する

 
■マウスアウト操作とは?
 
対象の内側から外側へ、マウスカーソルが撤退移動した瞬間に該当します。
 
■マウスアウトしたか監視する
 
onmouseout イベントを使用します。
 
登録したコールバック関数の引数から、MouseEvent オブジェクトが得られます。
 
マウスアウト時に実行されるイベントイベント

// ------------------------------------------------------------
// マウスアウト時に実行されるイベント
// ------------------------------------------------------------
document.onmouseout = function (e){
	if(!e) e = window.event; // レガシー

	// 出力テスト
	console.log(e);
};
 
■任意のエレメントにリスナーを登録した場合
 
検出範囲は、任意の要素とその子孫に限定されます。
 
任意のエレメントにコールバック関数を登録する

<html>
  <body>

    <div id="aaa" style="width:300px; height:200px; background:#f44; border:5px #a00 solid;" ></div>

    <script type="text/javascript">
    <!--
	// id 属性が、"aaa" であるエレメントを取得
	var element = document.getElementById("aaa");

	// ------------------------------------------------------------
	// マウスアウト時に実行されるイベント
	// ------------------------------------------------------------
	element.onmouseout = function (e){
		if(!e) e = window.event; // レガシー

		alert("マウスアウト");
	};
    //-->
    </script>

  </body>
</html>
 
■取得例(イベントリスナー)
 
マウスアウトしたか調べる

// ------------------------------------------------------------
// マウスアウト時に実行される関数
// ------------------------------------------------------------
function MouseOutFunc(e){
	console.log("マウスアウト");
}


// ------------------------------------------------------------
// イベントのリッスンを開始する
// ------------------------------------------------------------
// イベントリスナーに対応している
if(document.addEventListener){

	// マウスアウト時に実行されるイベント
	document.addEventListener("mouseout" , MouseOutFunc);

// アタッチイベントに対応している
}else if(document.attachEvent){

	// マウスアウト時に実行されるイベント
	document.attachEvent("onmouseout" , MouseOutFunc);

}
 
■取得例(イベントプロパティ)
 
マウスアウトしたか調べる

// ------------------------------------------------------------
// マウスアウト時に実行されるイベント
// ------------------------------------------------------------
document.onmouseout = function (e){
	if(!e) e = window.event; // レガシー

	console.log("マウスアウト");
};
 


 

マウスのボタンが押されたか調べる

 
 
 


■マウスのボタン関連のイベントについて


マウスのボタン関連のイベントは、以下の種類があります。
 
イベント名 解説
onmousedown MouseEvent マウスボタンを押した
onmouseup MouseEvent マウスボタンを離した
onclick MouseEvent クリックした(キーボードによる選択も検出可能)
ondblclick MouseEvent ダブルクリックした
 

■マウスボタンが押されたか監視する

 
onmousedown イベントを使用します。
 
登録したコールバック関数の引数から、MouseEvent オブジェクトが得られます。
 
マウスのボタンを押すと実行されるイベント

// ------------------------------------------------------------
// マウスのボタンを押すと実行されるイベント
// ------------------------------------------------------------
document.onmousedown = function (e){
	if(!e) e = window.event; // レガシー

	// 出力テスト
	console.log(e);
};
 
■操作したマウスボタンの種類を取得する
 
こちらで解説しています。
 
■任意のエレメントにリスナーを登録した場合
 
検出範囲は、任意の要素とその子孫に限定されます。
 
任意のエレメントにコールバック関数を登録する

<html>
  <body>

    <div id="aaa" style="width:300px; height:200px; background:#f44; border:5px #a00 solid;" ></div>

    <script type="text/javascript">
    <!--
	// id 属性が、"aaa" であるエレメントを取得
	var element = document.getElementById("aaa");

	// ------------------------------------------------------------
	// マウスのボタンを押すと実行されるイベント
	// ------------------------------------------------------------
	element.onmousedown = function (e){
		if(!e) e = window.event; // レガシー

		alert("マウスのボタンが押された");
	};
    //-->
    </script>

  </body>
</html>
 
■取得例(イベントリスナー)
 
マウスのボタンが押されたか調べる

// ------------------------------------------------------------
// マウスのボタンを押すと実行される関数
// ------------------------------------------------------------
function MouseDownFunc(e){
	console.log("マウスのボタンが押された");
}


// ------------------------------------------------------------
// イベントのリッスンを開始する
// ------------------------------------------------------------
// イベントリスナーに対応している
if(document.addEventListener){

	// マウスのボタンを押すと実行されるイベント
	document.addEventListener("mousedown" , MouseDownFunc);

// アタッチイベントに対応している
}else if(document.attachEvent){

	// マウスのボタンを押すと実行されるイベント
	document.attachEvent("onmousedown" , MouseDownFunc);

}
 
■取得例(イベントプロパティ)
 
マウスのボタンが押されたか調べる

// ------------------------------------------------------------
// マウスのボタンを押すと実行されるイベント
// ------------------------------------------------------------
document.onmousedown = function (e){
	if(!e) e = window.event; // レガシー

	console.log("マウスのボタンが押された");
};
 

■マウスボタンが離されたか監視する


onmouseup イベントを使用します。
 
登録したコールバック関数の引数から、MouseEvent オブジェクトが得られます。
 
マウスのボタンを離すと実行されるイベント

// ------------------------------------------------------------
// マウスのボタンを離すと実行されるイベント
// ------------------------------------------------------------
document.onmouseup = function (e){
	if(!e) e = window.event; // レガシー

	// 出力テスト
	console.log(e);
};
 
■操作したマウスボタンの種類を取得する
 
こちらで解説しています。
 
■任意のエレメントにリスナーを登録した場合
 
検出範囲は、任意の要素とその子孫に限定されます。
 
任意のエレメントにコールバック関数を登録する

<html>
  <body>

    <div id="aaa" style="width:300px; height:200px; background:#f44; border:5px #a00 solid;" ></div>

    <script type="text/javascript">
    <!--
	// id 属性が、"aaa" であるエレメントを取得
	var element = document.getElementById("aaa");

	// ------------------------------------------------------------
	// マウスのボタンを離すと実行されるイベント
	// ------------------------------------------------------------
	element.onmouseup = function (e){
		if(!e) e = window.event; // レガシー

		alert("マウスのボタンが離された");
	};
    //-->
    </script>

  </body>
</html>
 
■取得例(イベントリスナー)
 
マウスのボタンが離されたか調べる

// ------------------------------------------------------------
// マウスのボタンを離すと実行される関数
// ------------------------------------------------------------
function MouseUpFunc(e){
	console.log("マウスのボタンが離された");
}


// ------------------------------------------------------------
// イベントのリッスンを開始する
// ------------------------------------------------------------
// イベントリスナーに対応している
if(document.addEventListener){

	// マウスのボタンを離すと実行されるイベント
	document.addEventListener("mouseup" , MouseUpFunc);

// アタッチイベントに対応している
}else if(document.attachEvent){

	// マウスのボタンを離すと実行されるイベント
	document.attachEvent("onmouseup" , MouseUpFunc);

}
 
■取得例(イベントプロパティ)
 
マウスのボタンが離されたか調べる

// ------------------------------------------------------------
// マウスのボタンを離すと実行されるイベント
// ------------------------------------------------------------
document.onmouseup = function (e){
	if(!e) e = window.event; // レガシー

	console.log("マウスのボタンが離された");
};
 

■マウスがクリックされたか監視する


onclick イベントを使用します。
 
登録したコールバック関数の引数から、MouseEvent オブジェクトが得られます。
 
クリックすると実行されるイベント

// ------------------------------------------------------------
// クリックすると実行されるイベント
// ------------------------------------------------------------
document.onclick = function (e){
	if(!e) e = window.event; // レガシー

	// 出力テスト
	console.log(e);
};
 
■任意のエレメントにリスナーを登録した場合
 
検出範囲は、任意の要素とその子孫に限定されます。
 
任意のエレメントにコールバック関数を登録する

<html>
  <body>

    <div id="aaa" style="width:300px; height:200px; background:#f44; border:5px #a00 solid;" ></div>

    <script type="text/javascript">
    <!--
	// id 属性が、"aaa" であるエレメントを取得
	var element = document.getElementById("aaa");

	// ------------------------------------------------------------
	// クリックすると実行されるイベント
	// ------------------------------------------------------------
	element.onclick = function (e){
		if(!e) e = window.event; // レガシー

		alert("マウスがクリックされた");
	};
    //-->
    </script>

  </body>
</html>
 
■取得例(イベントリスナー)
 
マウスがクリックされたか調べる

// ------------------------------------------------------------
// クリックすると実行される関数
// ------------------------------------------------------------
function MouseClickFunc(e){
	console.log("マウスがクリックされた");
}


// ------------------------------------------------------------
// イベントのリッスンを開始する
// ------------------------------------------------------------
// イベントリスナーに対応している
if(document.addEventListener){

	// クリックすると実行されるイベント
	document.addEventListener("click" , MouseClickFunc);

// アタッチイベントに対応している
}else if(document.attachEvent){

	// クリックすると実行されるイベント
	document.attachEvent("onclick" , MouseClickFunc);

}
 
■取得例(イベントプロパティ)
 
マウスがクリックされたか調べる

// ------------------------------------------------------------
// クリックすると実行されるイベント
// ------------------------------------------------------------
document.onclick = function (e){
	if(!e) e = window.event; // レガシー

	console.log("マウスがクリックされた");
};
 

■ onmouseup と onclick イベントとの違いについて

 
■ onmouseup イベントの特徴
 
マウスボタンを離す操作を、取りこぼしなく調べたい場合に最適です。
 
実際は取りこぼします。
 
すべてのマウスボタンの操作を検出できます。
 
ボタンの種類によっては、デフォルトの機能を無効化する必要があります
 
■ onclick イベントの特徴
 
メニューなどの UI 選択操作を、検出したい場合に最適です。
 
キーボード操作による選択も、検出できます。
 
クリック用のマウスボタン(通常は左ボタン)のみ検出できます。
 
onclick イベントは、キャンセルに対応しています。
 
例えば、ハイパーリンクを無効化して、遷移を阻止する事ができます。
 

■マウスがダブルクリックされたか調べる


ondblclick イベントを使用します。
 
登録したコールバック関数の引数から、MouseEvent オブジェクトが得られます。
 
ダブルクリックすると実行されるイベント

// ------------------------------------------------------------
// ダブルクリックすると実行されるイベント
// ------------------------------------------------------------
document.ondblclick = function (e){
	if(!e) e = window.event; // レガシー

	// 出力テスト
	console.log(e);
};
 
■任意のエレメントにリスナーを登録した場合
 
検出範囲は、任意の要素とその子孫に限定されます。
 
任意のエレメントにコールバック関数を登録する

<html>
  <body>

    <div id="aaa" style="width:300px; height:200px; background:#f44; border:5px #a00 solid;" ></div>

    <script type="text/javascript">
    <!--
	// id 属性が、"aaa" であるエレメントを取得
	var element = document.getElementById("aaa");

	// ------------------------------------------------------------
	// ダブルクリックすると実行されるイベント
	// ------------------------------------------------------------
	element.ondblclick = function (e){
		if(!e) e = window.event; // レガシー

		alert("マウスがダブルクリックされた");
	};
    //-->
    </script>

  </body>
</html>
 
■取得例(イベントリスナー)
 
マウスがダブルクリックされたか調べる

// ------------------------------------------------------------
// ダブルクリックすると実行される関数
// ------------------------------------------------------------
function MouseDoubleClickFunc(e){
	console.log("マウスがダブルクリックされた");
}


// ------------------------------------------------------------
// イベントのリッスンを開始する
// ------------------------------------------------------------
// イベントリスナーに対応している
if(document.addEventListener){

	// ダブルクリックすると実行されるイベント
	document.addEventListener("dblclick" , MouseDoubleClickFunc);

// アタッチイベントに対応している
}else if(document.attachEvent){

	// ダブルクリックすると実行されるイベント
	document.attachEvent("ondblclick" , MouseDoubleClickFunc);

}
 
■取得例(イベントプロパティ)
 
マウスがダブルクリックされたか調べる

// ------------------------------------------------------------
// ダブルクリックすると実行されるイベント
// ------------------------------------------------------------
document.ondblclick = function (e){
	if(!e) e = window.event; // レガシー

	console.log("マウスがダブルクリックされた");
};
 


 

マウスボタンの押下状態を調べる

 
 
 


■マウスボタンの押下状態と種類を調べる


以下のプロパティを使用します。
 
プロパティ名説明
buttonNumberイベントの対象となるマウスボタンの種類を取得する。
buttonsNumberマウスボタンの純粋な押下状態を取得する。
 

■ buttons プロパティについて

 
■サポート状況について
 
DOM Events Level3 世代の仕様です。
 
InternetExplorer 8 以前では未対応です。
 
■得られる数値について
 
buttons プロパティは、現在のマウスボタンの純粋な押下状態を意味しています。
 
以下の数値を、論理和した結果が得られます。
 
複数のマウスボタンの同時押しの判別が可能です。
 
例えば、3 が得られた場合、マウスの左ボタンと右ボタンが両方押されています。
 
数値 解説
1 (00000001) マウス左ボタンが押されている
2 (00000010) マウス右ボタンが押されている
4 (00000100) マウス中央ボタンが押されている
 
■ onmouseup イベント発生時の注意点
 
既にボタンは離されており、結果は 0 となります。
 
離したボタンの種類を検出したい場合は、button プロパティを使用します。
 
もしくは、以前に得られた結果と比較します。
 
■取得例
 
buttons プロパティを使って、マウスボタンの押下状態を調べる

// ------------------------------------------------------------
// マウス関連のイベントが発生すると実行される関数
// ------------------------------------------------------------
function MouseEventFunc(e){
	if(!e) e = window.event; // レガシー

	// buttons プロパティが利用可能である
	if(e.buttons !== undefined){

		var data = e.buttons;

		var button_l = ((data & 0x0001) ? true : false);
		var button_r = ((data & 0x0002) ? true : false);
		var button_c = ((data & 0x0004) ? true : false);

		console.log("マウス左ボタンの押下状態:"   + button_l);
		console.log("マウス右ボタンの押下状態:"   + button_r);
		console.log("マウス中央ボタンの押下状態:" + button_c);
	}

	// ------------------------------------------------------------
	// デフォルトの動作を無効化する
	// ------------------------------------------------------------
	if(e.preventDefault){
		// デフォルトの動作を無効化する
		e.preventDefault();
	}else{
		// デフォルトの動作を無効化する(非標準)
		return false;
	}
}

// ------------------------------------------------------------
// イベントのリッスンを開始する
// ------------------------------------------------------------
// イベントリスナーに対応している
if(document.addEventListener){

	// マウスボタンを押すと実行されるイベント
	document.addEventListener("mousedown" , MouseEventFunc);
	// マウスカーソルを移動するたびに実行されるイベント
	document.addEventListener("mousemove" , MouseEventFunc);
	// マウスボタンを離すと実行されるイベント
	document.addEventListener("mouseup" , MouseEventFunc);
	// コンテキストメニューが表示される直前に実行されるイベント
	document.addEventListener("contextmenu" , MouseEventFunc);

// アタッチイベントに対応している
}else if(document.attachEvent){

	// マウスボタンを押すと実行されるイベント
	document.attachEvent("onmousedown" , MouseEventFunc);
	// マウスカーソルを移動するたびに実行されるイベント
	document.attachEvent("onmousemove" , MouseEventFunc);
	// マウスボタンを離すと実行されるイベント
	document.attachEvent("onmouseup" , MouseEventFunc);
	// コンテキストメニューが表示される直前に実行されるイベント
	document.attachEvent("oncontextmenu" , MouseEventFunc);

// イベントプロパティを使用する
}else{

	// マウスボタンを押すと実行されるイベント
	document.onmousedown = MouseEventFunc;
	// マウスカーソルを移動するたびに実行されるイベント
	document.onmousemove = MouseEventFunc;
	// マウスボタンを離すと実行されるイベント
	document.onmouseup = MouseEventFunc;
	// コンテキストメニューが表示される直前に実行されるイベント
	document.oncontextmenu = MouseEventFunc;

}
 

■ button プロパティについて

 
基本的には、一般的な仕様で動作します。
 
InternetExplorer の場合、専用の仕様(旧仕様)で動作する場合があります。
 
■InternetExplorer での動作仕様について
 
イベントリスナーを利用している場合、必ず一般的な仕様で動作します。
 
アタッチイベントを利用している場合、必ず旧仕様で動作します。
 
イベント属性を利用している場合、仕様が切り替わるので厄介です。
 
ドキュメントモードが 9 以降である場合、一般的な仕様で動作します。
 
ドキュメントモードが 8 以前である場合、旧仕様で動作します。
 
詳細については、こちらで解説しています。
 
■一般的なブラウザの場合(標準仕様)
 
以下の数値が得られます。
 
結果は、論理和ではありません。
 
数値 解説
0 マウス左ボタンに変化があった(マウスボタンに変化がない場合も 0 が得られる)
1 マウス中央ボタンに変化があった
2 マウス右ボタンに変化があった
 
現在操作しているマウスボタンの種類を意味します。
 
ボタンの純粋な押下状態を意味する訳ではありません。
 
onmousedown イベント中に、1 が得られた場合、中央ボタンが押されています。
 
onmouseup イベント中に、1 が得られた場合、中央ボタンが離されています。
 
複数のボタンを同時操作した場合、イベントは複数回に分けて発行されます
 
■InternetExplorer 専用の仕様(旧仕様)
 
以下の数値を、論理和した結果が得られます。
 
数値 解説
1 (00000001) マウス左ボタンに変化があった
2 (00000010) マウス右ボタンに変化があった
4 (00000100) マウス中央ボタンに変化があった
 
現在操作しているマウスボタンの種類を意味します。
 
ボタンの純粋な押下状態を意味する訳ではありません。
 
onmousedown イベント中に、1 が得られた場合、左ボタンが押されています。
 
onmouseup イベント中に、1 が得られた場合、左ボタンが離されています。
 
複数同時に操作したマウスボタンの判別が可能です。
 
例えば、3 が得られた場合、マウスの左ボタンと右ボタンの両方が変化しています。
 
■取得例
 
button プロパティを使って、マウスボタンの押下状態を調べる

// ------------------------------------------------------------
// マウスボタンを押すと実行される関数(一般的な仕様)
// ------------------------------------------------------------
function MouseDownFunc(e){
	if(e.button == 0) console.log("マウス左ボタンが押された");
	if(e.button == 1) console.log("マウス中央ボタンが押された");
	if(e.button == 2) console.log("マウス右ボタンが押された");
}

// ------------------------------------------------------------
// マウスボタンを離すと実行される関数(一般的な仕様)
// ------------------------------------------------------------
function MouseUpFunc(e){
	if(e.button == 0) console.log("マウス左ボタンが離された");
	if(e.button == 1) console.log("マウス中央ボタンが離された");
	if(e.button == 2) console.log("マウス右ボタンが離された");
}

// ------------------------------------------------------------
// マウスボタンを押すと実行される関数(InternetExplorer の旧仕様)
// ------------------------------------------------------------
function MouseDownOldFunc(e){
	if(e.button & 0x0001) console.log("マウス左ボタンが押された");
	if(e.button & 0x0002) console.log("マウス右ボタンが押された");
	if(e.button & 0x0004) console.log("マウス中央ボタンが押された");
}

// ------------------------------------------------------------
// マウスボタンを離すと実行される関数(InternetExplorer の旧仕様)
// ------------------------------------------------------------
function MouseUpOldFunc(e){
	if(e.button & 0x0001) console.log("マウス左ボタンが離された");
	if(e.button & 0x0002) console.log("マウス右ボタンが離された");
	if(e.button & 0x0004) console.log("マウス中央ボタンが離された");
}


// ------------------------------------------------------------
// イベントリスナーに対応している(必ず一般的な仕様で動作する)
// ------------------------------------------------------------
if(document.addEventListener){

	// マウスボタンを押すと実行されるイベント
	document.addEventListener("mousedown" , MouseDownFunc);
	// マウスボタンを離すと実行されるイベント
	document.addEventListener("mouseup" , MouseUpFunc);

	// コンテキストメニューが表示される直前に実行されるイベント
	document.addEventListener("contextmenu" , function(e){
		// デフォルトの動作を無効化する
		e.preventDefault();
	});

// ------------------------------------------------------------
// アタッチイベントに対応している(必ず InternetExplorer の旧仕様で動作する)
// ------------------------------------------------------------
}else if(document.attachEvent){

	// マウスボタンを押すと実行されるイベント
	document.attachEvent("onmousedown" , MouseDownOldFunc);
	// マウスボタンを離すと実行されるイベント
	document.attachEvent("onmouseup" , MouseUpOldFunc);

	// コンテキストメニューが表示される直前に実行されるイベント
	document.attachEvent("oncontextmenu" , function(e){
		// デフォルトの動作を無効化する
		return false;
	});

}
 
イベントプロパティから、マウスボタンの押下状態を調べる

// ------------------------------------------------------------
// マウスイベントで変化したボタンを buttons 形式で取得する関数
// ------------------------------------------------------------
function MouseEventGetChangedButtons(event_obj){
	try{
		if(event_obj instanceof MouseEvent){
			var buttons = 0;
			if(event_obj.button == 0) buttons |= 0x01;
			if(event_obj.button == 1) buttons |= 0x04;
			if(event_obj.button == 2) buttons |= 0x02;
			return buttons;
		}
	}catch(e){
	}
	return event_obj.button;
}

// ------------------------------------------------------------
// マウスボタンを押すと実行されるイベント
// ------------------------------------------------------------
document.onmousedown = function (e){
	if(!e) e = window.event; // レガシー

	// 変化したボタンを buttons 形式で取得
	var buttons = MouseEventGetChangedButtons(e);

	if(buttons & 0x0001) console.log("マウス左ボタンが押された");
	if(buttons & 0x0002) console.log("マウス右ボタンが押された");
	if(buttons & 0x0004) console.log("マウス中央ボタンが押された");
}

// ------------------------------------------------------------
// マウスボタンを離すと実行されるイベント
// ------------------------------------------------------------
document.onmouseup = function (e){
	if(!e) e = window.event; // レガシー

	// 変化したボタンを buttons 形式で取得
	var buttons = MouseEventGetChangedButtons(e);

	if(buttons & 0x0001) console.log("マウス左ボタンが離された");
	if(buttons & 0x0002) console.log("マウス右ボタンが離された");
	if(buttons & 0x0004) console.log("マウス中央ボタンが離された");
}
 

■マウスボタンの押下状態を監視する

 
基本的には、onmousedownonmouseup イベントを使用します。
 
マウスボタンが押された瞬間と、離された瞬間を監視します。
 
■ onmouseup イベントの取りこぼしについて
 
onmouseup イベントは、必ずしも発生するとは限りません。
 
スクロールバーをクリックした場合や、ドラッグを発生させた場合、キーボードでタスクを切り替えた場合、インラインフレームが混在する場合、マウスジェスチャー操作を行った場合など、onmouseup イベントが発生しない事があります。
 
■マウス右ボタンの取りこぼしについて
 
右マウスボタンを押すと、コンテキストメニューが表示されます。
 
OS によっては、離した瞬間ではなく、押した瞬間に表示されます。
 
安定して検出するには、コンテキストメニューの表示を無効化します。
 
もし無効化しない場合、コンテキストメニューが表示される時点で、離されたと判別します。
 
■マウス中央ボタンの取りこぼしについて
 
マウス中央ボタンを押すと、オートスクロールが発生します。
 
安定して検出するには、オートスクロールの発生を無効化します。
 
もし無効化しない場合、瞬時に離されたと判別します。
 
■誤判定からの復旧について
 
onmouseup イベントを取りこぼすと、マウスボタンが押しっぱなしであると誤判定されます。
 
しかし、マウスボタンが押されていないと判別するのは厄介です。
 
onblur イベントを使用すると、フォーカスを失った事がわかります。
 
この時、すべてのマウスボタンが離されたと判別するといいでしょう。
 
buttons プロパティを使用すると、マウスボタンを押していない事を判別できます。
 
■ブラウザのマウスジェスチャー機能が有効な場合
 
マウスの右ボタンや中央ボタンは、まともに検出できません。
 
Opera などが該当します。
 
■マウスボタンの入力状態を調べるコンストラクタ
 
マウスボタンの入力状態を調べるコンストラクタ

// ------------------------------------------------------------
// マウスボタンの入力状態を調べるコンストラクタ
// ------------------------------------------------------------
function InputMouseButton(window_obj){

	// ------------------------------------------------------------
	// 初期化
	// ------------------------------------------------------------
	var self = this;
	var document_obj = window_obj.document;
	var mouse_handler;
	var blur_handler;
	var button_tbl = [0,2,1,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31];
	var event_type_down = { "mousedown":true , "dragstart":true };
	var event_type_move = { "mousemove":true , "drag":true      };
	var event_type_up   = { "mouseup":true   , "dragend":true   };
	self.buttons = 0;

	// ------------------------------------------------------------
	// イベント
	// ------------------------------------------------------------
	blur_handler = function(e){
		self.buttons = 0;
	};
	if(window_obj.addEventListener){
		mouse_handler = function(e){
			if(event_type_down[e.type]){
				self.buttons |=  (0x1 << button_tbl[e.button]);
			}else if(event_type_up[e.type]){
				self.buttons &= ~(0x1 << button_tbl[e.button]);
			}else if(event_type_move[e.type]){
				if(e.buttons !== undefined){ self.buttons = e.buttons; }
			}
		};
		window_obj.addEventListener("mousedown",mouse_handler,true);
		window_obj.addEventListener("mouseup",mouse_handler,false);
		window_obj.addEventListener("mousemove",mouse_handler,true);
		window_obj.addEventListener("dragstart",mouse_handler,true);
		window_obj.addEventListener("dragend",mouse_handler,false);
		window_obj.addEventListener("drag",mouse_handler,true);
		window_obj.addEventListener("blur",blur_handler);

	}else if(window_obj.attachEvent){
		mouse_handler = function(e){
			if(event_type_up[e.type]){
				self.buttons &= ~(e.button);
			}else{
				self.buttons  =  (e.button);
			}
		};
		document_obj.attachEvent("onmousedown",mouse_handler);
		document_obj.attachEvent("onmouseup",mouse_handler);
		document_obj.attachEvent("onmousemove",mouse_handler);
		document_obj.attachEvent("ondragstart",mouse_handler);
		document_obj.attachEvent("ondragend",mouse_handler);
		document_obj.attachEvent("ondrag",mouse_handler);
		window_obj.attachEvent("onblur",blur_handler);
	}

	// ------------------------------------------------------------
	// buttons 形式で取得
	// ------------------------------------------------------------
	this.getButtons = function (){
		return (this.buttons);
	};

	// ------------------------------------------------------------
	// マウス左ボタンの押下状態を調べる
	// ------------------------------------------------------------
	this.isDownLeft = function (){
		return (this.buttons & (0x1)) ? true : false;
	};

	// ------------------------------------------------------------
	// マウス右ボタンの押下状態を調べる
	// ------------------------------------------------------------
	this.isDownRight = function (){
		return (this.buttons & (0x2)) ? true : false;
	};

	// ------------------------------------------------------------
	// マウス中央ボタンの押下状態を調べる
	// ------------------------------------------------------------
	this.isDownCenter = function (){
		return (this.buttons & (0x4)) ? true : false;
	};

	// ------------------------------------------------------------
	// 解放する
	// ------------------------------------------------------------
	this.release = function (){
		if(window_obj.removeEventListener){
			window_obj.removeEventListener("mousedown",mouse_handler,true);
			window_obj.removeEventListener("mouseup",mouse_handler,false);
			window_obj.removeEventListener("mousemove",mouse_handler,true);
			window_obj.removeEventListener("dragstart",mouse_handler,true);
			window_obj.removeEventListener("dragend",mouse_handler,false);
			window_obj.removeEventListener("drag",mouse_handler,true);
			window_obj.removeEventListener("blur",blur_handler);
		}else if(window_obj.detachEvent){
			document_obj.detachEvent("onmousedown",mouse_handler);
			document_obj.detachEvent("onmouseup",mouse_handler);
			document_obj.detachEvent("onmousemove",mouse_handler);
			document_obj.detachEvent("ondragstart",mouse_handler);
			document_obj.detachEvent("ondragend",mouse_handler);
			document_obj.detachEvent("ondrag",mouse_handler);
			window_obj.detachEvent("onblur",blur_handler);
		}
	};

}
 
■使用例
 
InputMouseButton クラスを使って、各マウスボタンの入力状態を取得する

// ------------------------------------------------------------
// InputMouseButton オブジェクトを作成
// ------------------------------------------------------------
var input_mouse_button = new InputMouseButton(window);


// ------------------------------------------------------------
// 一定の時間隔で実行
// ------------------------------------------------------------
// 60 フレームレート間隔で実行
setInterval(function (){

	console.log("マウス左ボタンの押下状態:"   + input_mouse_button.isDownLeft());
	console.log("マウス右ボタンの押下状態:"   + input_mouse_button.isDownRight());
	console.log("マウス中央ボタンの押下状態:" + input_mouse_button.isDownCenter());

},1000/60);


// ------------------------------------------------------------
// マウスボタン入力監視を終了
// ------------------------------------------------------------
//input_mouse_button.release();
//input_mouse_button = null;
 

■装飾キーの押下状態について

 
以下のプロパティを使用します。
 
プロパティ名説明
ctrlKeyBooleanCtrl キーの押下状態を取得する。
shiftKeyBooleanShift キーの押下状態を取得する。
altKeyBooleanAlt キーの押下状態を取得する。
metaKeyBooleanMeta キーの押下状態を取得する。
 
■取得例
 
装飾キーの押下状態を調べる

// ------------------------------------------------------------
// マウス関連のイベントが発生すると実行される関数
// ------------------------------------------------------------
function MouseEventFunc(e){
	if(!e) e = window.event; // レガシー

	if(e.ctrlKey)	console.log("Ctrl キー押下中");
	if(e.shiftKey)	console.log("Shift キー押下中");
	if(e.altKey)	console.log("Alt キー押下中");
	if(e.metaKey)	console.log("Meta キー押下中");
}

// ------------------------------------------------------------
// イベントのリッスンを開始する
// ------------------------------------------------------------
// イベントリスナーに対応している
if(document.addEventListener){

	// マウスカーソルを移動するたびに実行されるイベント
	document.addEventListener("mousemove" , MouseEventFunc);

// アタッチイベントに対応している
}else if(document.attachEvent){

	// マウスカーソルを移動するたびに実行されるイベント
	document.attachEvent("onmousemove" , MouseEventFunc);

// イベントプロパティを使用する
}else{

	// マウスカーソルを移動するたびに実行されるイベント
	document.onmousemove = MouseEventFunc;

}
 


 

マウスのホイールが回転されたか調べる

 
 
 

■標準化されたホイールイベント(Events Level3 世代)

 
onwheel イベントを使用します。
 
サポートしていない場合、非標準時代のイベントを使用します。
 

■古いマウスホイールイベント(非標準時代)

 
■ Firefox の場合
 
MouseScrollEvent イベントを使用します。
 
■ Firefox 以外の場合
 
onmousewheel イベントを使用します。
 

■ WheelEvent について(Events Level3)

 
■ WheelEvent に対応しているか調べる
 
window.WheelEvent が真であるか比較します。
 
この方法は、Safari 6 以前の環境では、正しく動作しません。
 
■ホイールの操作を監視する
 
onwheel イベントを使用します。
 
登録したコールバック関数の引数から、WheelEvent オブジェクトが得られます。
 
ホイールを回転すると実行されるイベント

// WheelEvent に対応している
if(window.WheelEvent){

	// ------------------------------------------------------------
	// ホイールを操作すると実行されるイベント
	// ------------------------------------------------------------
	document.addEventListener("wheel" , function (e){

		// 出力テスト
		console.log(e);
	});
}
 
■ WheelEvent オブジェクトについて
 
以下の読み取り専用のプロパティがあります。
 
プロパティ名説明
deltaXNumberx 軸方向の測定値を取得する。
deltaYNumbery 軸方向の測定値を取得する。
deltaZNumberz 軸方向の測定値を取得する。
deltaModeNumber測定値のモードを取得する。
 
■ DeltaMode について
 
以下のモードが、定数として定義されています。
 
定数番号説明
WheelEvent.DOM_DELTA_PIXEL0値の単位は、ピクセル値である。
WheelEvent.DOM_DELTA_LINE1値の単位は、行数である。
WheelEvent.DOM_DELTA_PAGE2値の単位は、ページ数である。
 
■取得例
 
ホイールを操作を取得する

// WheelEvent に対応している
if(window.WheelEvent){

	// ------------------------------------------------------------
	// ホイールを操作すると実行されるイベント
	// ------------------------------------------------------------
	document.addEventListener("wheel" , function (e){

		console.log("deltaX:" + e.deltaX);
		console.log("deltaY:" + e.deltaY);
		console.log("deltaZ:" + e.deltaZ);
		console.log("deltaMode:" + e.deltaMode);
		console.log(" ----- ");

	});
}
 
■任意のエレメントにリスナーを登録した場合
 
検出範囲は、任意の要素とその子孫に限定されます。
 
任意のエレメントにコールバック関数を登録する

<html>
  <body>

    <div id="aaa" style="width:300px; height:200px; background:#f44; border:5px #a00 solid;" ></div>

    <script type="text/javascript">
    <!--
	// id 属性が、"aaa" であるエレメントを取得
	var element = document.getElementById("aaa");

	// WheelEvent に対応している
	if(window.WheelEvent){

		// ------------------------------------------------------------
		// ホイールを操作すると実行されるイベント
		// ------------------------------------------------------------
		element.addEventListener("wheel" , function (e){

				alert("ホイールを操作した");

		});
	}
    //-->
    </script>

  </body>
</html>
 
■ホイール操作によるスクロールを無効化する
 
preventDefault() メソッドを実行します。
 
ホイール操作によるスクロールをキャンセルする

// WheelEvent に対応している
if(window.WheelEvent){

	// ------------------------------------------------------------
	// ホイールを操作すると実行されるイベント
	// ------------------------------------------------------------
	document.addEventListener("wheel" , function (e){

		// ホイール操作によるスクロールを無効化する
		e.preventDefault();

	});
}
 

■ MouseWheelEvent イベントについて(非標準)

 
■ onmousewheel イベントのサポート状況について
 
IE6 を含む多くのブラウザで動作します。
 
非標準であり、環境依存です。
 
Firefox は、onmousewheel イベントに対応していません。
 
かわりに、MouseScrollEvent を使用します。
 
■マウスホイールの回転を監視する
 
onmousewheel イベントを使用します。
 
登録したコールバック関数の引数から、MouseWheelEvent オブジェクトが得られます。
 
マウスホイールを回転すると実行されるイベント

// ------------------------------------------------------------
// マウスホイールを回転すると実行されるイベント
// ------------------------------------------------------------
document.onmousewheel = function (e){
	if(!e) e = window.event; // レガシー

	// 出力テスト
	console.log(e);
};
 
■ MouseWheelEvent オブジェクトについて
 
以下のプロパティがあります。
 
プロパティ 解説
wheelDelta Number マウスホイールの回転量。120 ずつ増減。(環境によって異なる)
正の値で上方向に回転、
負の値で下方向に回転。
 
■取得例(イベントリスナー)
 
マウスホイールの回転量を調べる

// ------------------------------------------------------------
// マウスホイールを回すと実行される関数
// ------------------------------------------------------------
function MouseWheelFunc(e){
	// 回転量
	var delta = -e.wheelDelta;

	// 出力テスト
	console.log("delta:" + delta);
}


// ------------------------------------------------------------
// イベントのリッスンを開始する
// ------------------------------------------------------------
// イベントリスナーに対応している
if(document.addEventListener){

	// マウスホイールを回すと実行されるイベント
	document.addEventListener("mousewheel" , MouseWheelFunc);

// アタッチイベントに対応している
}else if(document.attachEvent){

	// マウスホイールを回すと実行されるイベント
	document.attachEvent("onmousewheel" , MouseWheelFunc);

}
 
■取得例(イベントプロパティ)
 
マウスホイールの回転量を調べる

// ------------------------------------------------------------
// マウスホイールを回転すると実行されるイベント
// ------------------------------------------------------------
document.onmousewheel = function (e){
	if(!e) e = window.event; // レガシー

	// 回転量
	var delta = -e.wheelDelta;

	// 出力テスト
	console.log("delta:" + delta);
};
 
■マウスホイールの回転によるスクロールを無効化する
 
preventDefault() メソッドを実行します。
 
 
マウスホイールの回転によるスクロールをキャンセルする

// ------------------------------------------------------------
// マウスホイールを回転すると実行される関数
// ------------------------------------------------------------
function MouseWheelFunc(e){
	if(!e) e = window.event; // レガシー

	// ------------------------------------------------------------
	// マウスホイールの回転によるスクロールをキャンセルする
	// ------------------------------------------------------------
	if(e.preventDefault){
		// デフォルトの動作を無効化する
		e.preventDefault();
	}else{
		// デフォルトの動作を無効化する(非標準)
		return false;
	}
}


// ------------------------------------------------------------
// イベントのリッスンを開始する
// ------------------------------------------------------------
// イベントリスナーに対応している
if(document.addEventListener){

	// マウスホイールを回すと実行されるイベント
	document.addEventListener("mousewheel" , MouseWheelFunc);

// アタッチイベントに対応している
}else if(document.attachEvent){

	// マウスホイールを回すと実行されるイベント
	document.attachEvent("onmousewheel" , MouseWheelFunc);

// イベントプロパティを使用する
}else{

	// マウスホイールを回すと実行されるイベント
	document.onmousewheel = MouseWheelFunc;

}
 

■ MouseScrollEvent について(非標準、Firefox 専用)

 
■ MouseScrollEvent イベントに対応しているか調べる
 
window.MouseScrollEvent が真であるか比較します。
 
Firefox のみサポートしています。
 
■マウスホイールの回転を監視する
 
以下の種類があります。
 
イベント名 解説
"DOMMouseScroll" MouseScrollEvent マウスホイールの回転を監視する(結果は行数)
"MozMousePixelScroll" MouseScrollEvent マウスホイールの回転を監視する(結果はピクセル値)
 
■ MouseScrollEvent オブジェクトについて
 
以下のプロパティがあります。
 
プロパティ 解説
detail Number マウスホイールの回転量。単位はイベントごとに異なる。
正の値で下方向に回転、
負の値で上方向に回転。
axis Number 水平方向なら 1
垂直方向なら 2
 
■取得例
 
マウスホイールの回転量を調べる(Firefox 専用)

// MouseScrollEvent に対応している
if(window.MouseScrollEvent){

	// ------------------------------------------------------------
	// マウスホイールを回すと実行されるイベント(結果は行数)
	// ------------------------------------------------------------
	document.addEventListener( "DOMMouseScroll" , function (e) {

		// 回転量
		var delta = e.detail;
		// 方向
		var axis = e.axis;
		// 出力テスト
		console.log(delta , axis);
	});

	// ------------------------------------------------------------
	// マウスホイールを回すと実行されるイベント(結果はピクセル値)
	// ------------------------------------------------------------
	document.addEventListener( "MozMousePixelScroll" , function (e) {

		// 回転量
		var delta = e.detail;
		// 方向
		var axis = e.axis;
		// 出力テスト
		console.log(delta , axis);
	});

}
 
■マウスホイールの回転によるスクロールを無効化する
 
preventDefault() メソッドを実行します。
 
マウスホイールの回転によるスクロールをキャンセルする

// MouseScrollEvent に対応している
if(window.MouseScrollEvent){

	// ------------------------------------------------------------
	// マウスホイールを回すと実行されるイベント
	// ------------------------------------------------------------
	document.addEventListener("DOMMouseScroll" , function (e){

		// マウスホイールの回転によるスクロールをキャンセルする
		e.preventDefault();

	});
}
 

 
 

コンテキストメニューが表示されるか調べる

 
 


■コンテキストメニューが表示される直前か監視する

 
oncontextmenu イベントを使用します。
 
登録したコールバック関数の引数から、MouseEvent オブジェクトが得られます。
 
コンテキストメニューが表示される直前に実行されるイベント

// ------------------------------------------------------------
// コンテキストメニューが表示される直前に実行されるイベント
// ------------------------------------------------------------
document.oncontextmenu = function (e){
	if(!e) e = window.event; // レガシー

	// 出力テスト
	console.log(e);
};
 
■任意のエレメントにリスナーを登録した場合
 
検出範囲は、任意の要素とその子孫に限定されます。
 
任意のエレメントにコールバック関数を登録する

<html>
  <body>

    <div id="aaa" style="width:300px; height:200px; background:#f44; border:5px #a00 solid;" ></div>

    <script type="text/javascript">
    <!--
	// id 属性が、"aaa" であるエレメントを取得
	var element = document.getElementById("aaa");

	// ------------------------------------------------------------
	// コンテキストメニューが表示される直前に実行されるイベント
	// ------------------------------------------------------------
	element.oncontextmenu = function (e){
		if(!e) e = window.event; // レガシー

		alert("コンテキストメニューが表示される");
	};
    //-->
    </script>

  </body>
</html>
 
■コンテキストメニューの表示を無効化する
 
preventDefault() メソッドを実行します。
 
 
コンテキストメニューの表示をキャンセルする

// ------------------------------------------------------------
// コンテキストメニューが表示される直前に実行される関数
// ------------------------------------------------------------
function MouseContextMenuFunc(e){
	if(!e) e = window.event; // レガシー

	// ------------------------------------------------------------
	// コンテキストメニューの表示をキャンセルする
	// ------------------------------------------------------------
	if(e.preventDefault){
		// デフォルトの動作を無効化する
		e.preventDefault();
	}else{
		// デフォルトの動作を無効化する(非標準)
		return false;
	}
}


// ------------------------------------------------------------
// イベントのリッスンを開始する
// ------------------------------------------------------------
// イベントリスナーに対応している
if(document.addEventListener){

	// コンテキストメニューが表示される直前に実行されるイベント
	document.addEventListener("contextmenu" , MouseContextMenuFunc);

// アタッチイベントに対応している
}else if(document.attachEvent){

	// コンテキストメニューが表示される直前に実行されるイベント
	document.attachEvent("oncontextmenu" , MouseContextMenuFunc);

}else{

	// コンテキストメニューが表示される直前に実行されるイベント
	document.oncontextmenu = MouseContextMenuFunc;

}
 
■取得例(イベントリスナー)
 
コンテキストメニューが表示されるか調べる

// ------------------------------------------------------------
// コンテキストメニューが表示される直前に実行される関数
// ------------------------------------------------------------
function MouseContextMenuFunc(e){
	console.log("コンテキストメニューが表示される");
}


// ------------------------------------------------------------
// イベントのリッスンを開始する
// ------------------------------------------------------------
// イベントリスナーに対応している
if(document.addEventListener){

	// コンテキストメニューが表示される直前に実行されるイベント
	document.addEventListener("contextmenu" ,MouseContextMenuFunc);

// アタッチイベントに対応している
}else if(document.attachEvent){

	// コンテキストメニューが表示される直前に実行されるイベント
	document.attachEvent("oncontextmenu" , MouseContextMenuFunc);

}
 
■取得例(イベントプロパティ)
 
コンテキストメニューが表示されるか調べる

// ------------------------------------------------------------
// コンテキストメニューが表示される直前に実行されるイベント
// ------------------------------------------------------------
document.oncontextmenu = function (e){
	if(!e) e = window.event; // レガシー

	console.log("コンテキストメニューが表示される");
};
 

 
 

マウスカーソルについて

 
 
 


■ネイティブのマウスカーソルを変更する


cursor スタイルを使用します。
 
任意の要素の上でマウスを移動すると、アイコンが変化します。
 
■汎用カーソルを設定する
 
cursor プロパティには、以下の値を指定する事ができます。
 
ブラウザや OS によっては、対応していない場合もあります。
 
解説 L
"auto" 最適なアイコンが自動で表示される(初期値) 2
"default" 通常のアイコン(常時表示) 2
"none" 何も表示しない 3
"context-menu" コンテキストメニューが利用可能 3
"help" ヘルプが利用可能 2
"pointer" 指差し用アイコン 2
"progress" 進捗(操作続行は可能) 2
"wait" 待機(操作続行は不可能) 2
"cell" 選択可能(セルなど) 3
"crosshair" 十字カーソル 2
"text" Iビームカーソル(横書テキスト用) 2
"vertical-text" Iビームカーソル(縦書テキスト用) 3
"move" 移動アイコン 2
"alias" リンクアイコン 3
"copy" コピーアイコン 3
"no-drop" ドロップ不可 3
"not-allowed" 許可されていない 3
"n-resize" リサイズ可能(北方向) 2
"ne-resize" リサイズ可能(北東方向) 2
"e-resize" リサイズ可能(東方向) 2
"se-resize" リサイズ可能(南東方向) 2
"s-resize" リサイズ可能(南方向) 2
"sw-resize" リサイズ可能(南西方向) 2
"w-resize" リサイズ可能(西方向) 2
"nw-resize" リサイズ可能(北西方向) 2
"ns-resize" リサイズ可能(垂直方向) 3
"ew-resize" リサイズ可能(水平方向) 3
"nesw-resize" リサイズ可能(北東方向と南西方向) 3
"nwse-resize" リサイズ可能(北西方向と南東方向) 3
"col-resize" リサイズ可能(列など) 3
"row-resize" リサイズ可能(行など) 3
"all-scroll" 全方向スクロール 3
"zoom-in" ズームイン用 3
"zoom-out" ズームアウト用 3
"grab" 掴み操作が利用可能 3
"grabbing" 掴み操作中 3
 
汎用カーソルを表示する

<html>
  <body>

    <div id="aaa" style="height:300px; margin:20px; background:#fcc;" ></div>

    <script type="text/javascript">
    <!--

	// ------------------------------------------------------------
	// "aaa" という ID 属性のエレメントを取得する
	// ------------------------------------------------------------
	var element = document.getElementById("aaa");

	// ------------------------------------------------------------
	// CSSStyleDeclaration オブジェクトを取得
	// ------------------------------------------------------------
	var style = element.style;

	// ------------------------------------------------------------
	// 汎用カーソルを指定する
	// ------------------------------------------------------------
	style.cursor = "move";

    //-->
    </script>

  </body>
</html>
 
■任意の画像をカーソルに設定する
 
cursor プロパティに、『 url("URL") 』値を指定します。
 
カンマで区切って、複数の候補を指定する事もできます。
 
候補の最後に、汎用カーソル値を、必ず1つ含める必要があります。
 
CSS3 では、『 url("URL") x y 』値を指定できます。
 
x y は、表示オフセット値です。
 
カスタムカーソルを表示する

<html>
  <body>

    <div id="aaa" style="height:300px; margin:20px; background:#fcc;" ></div>

    <script type="text/javascript">
    <!--

	// ------------------------------------------------------------
	// "aaa" という ID 属性のエレメントを取得する
	// ------------------------------------------------------------
	var element = document.getElementById("aaa");

	// ------------------------------------------------------------
	// CSSStyleDeclaration オブジェクトを取得
	// ------------------------------------------------------------
	var style = element.style;

	// ------------------------------------------------------------
	// カーソルに任意の画像を指定する(表示できない場合、最後に指定した汎用カーソルが表示される)
	// ------------------------------------------------------------
	style.cursor = 'url("http://example.com/cursor/001.gif") 8 8, crosshair';

	// ------------------------------------------------------------
	// CSS3 の書式が未対応の場合、CSS2 の書式を指定する
	// ------------------------------------------------------------
	if(!(style.cursor)){
		style.cursor = 'url("http://example.com/cursor/000.gif"), crosshair';
	}

    //-->
    </script>

  </body>
</html>
 

■要素をマウスカーソルのように移動する

 
画像イメージ要素を、常にマウスカーソルの位置に表示する方法について確認します。
 
1.イメージ要素を作成する
 
 
2.画像の読み込みを開始する
 
src プロパティに、画像の URL を指定します。
 
3.画像をブラウザに表示する
 
<BODY> 要素のノードリストに登録します。
 
4.画像のスタイルを設定する
 
position スタイルに、"fixed" を指定します。
 
5.画像の位置を変更する
 
 
要素の移動については、こちらで解説しています。
 
■実装例
 
マウスカーソルの座標をエレメントの位置に反映する

// ------------------------------------------------------------
// HTMLImageElement オブジェクトを作成する
// ------------------------------------------------------------
var image = new Image();

// ------------------------------------------------------------
// URL を指定して、画像の読み込みを開始する
// ------------------------------------------------------------
image.src = "http://example.com/graphics/cursor.png";

// ------------------------------------------------------------
// BODY のノードリストに登録
// ------------------------------------------------------------
document.body.appendChild(image);

// ------------------------------------------------------------
// position スタイルを "fixed" に設定
// ------------------------------------------------------------
image.style.position = "fixed";

// ------------------------------------------------------------
// マウスカーソルが移動したときに呼び出されるイベント
// ------------------------------------------------------------
document.onmousemove = function (e){
	if(!e) e = window.event; // レガシー

	// ------------------------------------------------------------
	// 画像要素の位置を更新する
	// ------------------------------------------------------------
	image.style.left = (e.clientX) + "px";
	image.style.top  = (e.clientY) + "px";

};
 

 
 

マウスロックについて(HTML5 世代)

 

■マウスロック機能について

 
Pointer Lock API については、こちらで解説しています。
 

 
 

マウス操作を無効化する

 

■キャンセルに対応しているイベント

 
以下のイベントは、キャンセルに対応しています。(一部抜粋)
 
イベント名 解説
onmousedown MouseEvent マウスボタンを押すと実行されるイベント
onmouseup MouseEvent マウスボタンを離すと実行されるイベント
onclick MouseEvent クリック時に実行されるイベント
ondblclick MouseEvent ダブルクリック時に実行されるイベント
oncontextmenu MouseEvent コンテキストメニューが表示される直前に実行されるイベント
onmouseover MouseEvent マウスカーソルが、外から内側へ侵入した時に実行されるイベント
onmouseout MouseEvent マウスカーソルが、内側から外へ撤退した時に実行されるイベント
onwheel MouseEvent ホイールを回転した時に実行されるイベント
 

■ onmousedown イベントのキャンセルについて

 
■中止可能な機能
 
ドラッグの発生を、阻止する事ができます。
 
ドラッグやダブルクリック操作による、文字列の選択を阻止する事ができます。
 
マウス中央ボタンクリックによる、オートスクロールの発生を阻止する事ができます。
 
■オートスクロール機能を無効化する
 
Opera(Presto 版) では、対応していません。
 
Internet Explorer 8 以前では、対応していません。
 
オートスクロール機能のみを無効化する

<html>
  <body>

    <div id="aaa" style="width:auto; height:5000px; margin:0px 100px; background:#fcc;" ></div>

    <script type="text/javascript">
    <!--

	// ------------------------------------------------------------
	// "aaa" という ID 属性のエレメントを取得する
	// ------------------------------------------------------------
	var element = document.getElementById("aaa");

	// ------------------------------------------------------------
	// マウスボタンを押すと実行されるイベント
	// ------------------------------------------------------------
	element.addEventListener("mousedown" , function (e){

		// 中央ボタンに変化がある
		if(e.button == 1){

			// オートスクロールを無効化
			e.preventDefault();
		}
	});
    //-->
    </script>

  </body>
</html>
 

■ onclick イベントのキャンセルについて

 
■中止可能な機能
 
クリック操作による、決定を阻止する事ができます。
 
onclick イベントは、マウス操作だけでなく、エンターキー操作も含まれます。
 
■ハイパーリンクを無効化する
 
こちらで解説しています。