JavaScript プログラミング講座


マウスの操作について



・マウスカーソルの座標を調べる
・マウスカーソルが移動したか調べる
・マウスボタンが押されたか調べる
・マウスボタンの押下状態を調べる
・マウスのホイールが回転されたか調べる
・コンテキストメニューが表示されるか調べる
・マウスカーソルについて
・マウスロックについて（HTML5 世代）
・マウス操作を無効化する

前のページに戻る

　

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

　
　

■マウスが移動したか調べる


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

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

	// 出力テスト
	console.log(e);
};
　
■MouseEvent オブジェクトについて
　
MouseEvent オブジェクトには、以下のプロパティがあります。（主要ブラウザで取得可）
　
MouseEvent は、こちらでも解説しています。
　
プロパティ 型 解説
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 全体の、左上を原点とした座標系です。
　
１．スクロール位置を取得する
　
まず、ブラウザのスクロール位置を調べます。
　
スクロール位置を取得する関数

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


// ------------------------------------------------------------
// 取得テスト
// ------------------------------------------------------------
var scroll_pos = DocumentGetScrollPosition(document);

console.log(scroll_pos.x);
console.log(scroll_pos.y);
　
２．グローバル座標系を基点としたマウスカーソルの座標を取得する
　
クライアント座標系を基点としたマウスカーソルの座標を取得します。
　
clientX と clientY プロパティを使用します。
　
「クライアント座標」と「スクロール位置」を加算すると、「グローバル座標」に変換できます。
　
■イベントリスナーやアタッチイベントを使って取得する例
　
イベントリスナーを使って、クライアント座標系を基点としたマウスカーソルの座標を取得する

// ------------------------------------------------------------
// スクロール位置を取得する関数
// ------------------------------------------------------------
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){
	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);
}


// ------------------------------------------------------------
// イベントのリッスンを開始する
// ------------------------------------------------------------
// イベントリスナーに対応している
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>
　
■イベントリスナーやアタッチイベントを使って取得する例
　
イベントリスナーを使って、マウスカーソルが移動したか調べる

// ------------------------------------------------------------
// マウスカーソルが移動するたびに実行される関数
// ------------------------------------------------------------
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 イベントは、メニューのボタンなどを選択する場合に最適です。
　
クリック用に割り当てられたマウスボタン（通常は左ボタン）のみ調べることが可能です。
　
キーボード操作による選択も、onclick イベントで検出できます。
　
マウスの操作方法によっては、onclick イベントが発行されない事があります。
　
例えば、ドラッグしながら離した場合、onclick イベントは発行されません。
　
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("マウスがダブルクリックされた");
};
　

上に戻る

　

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

　
　
■ buttons プロパティについて
■ button プロパティについて
■マウスボタンの押下状態を監視する
■装飾キーの押下状態について
　


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


マウスボタンの押下状態を調べるには、button プロパティや buttons プロパティを使用します。
　
押されたマウスボタンの種類を判別する事もできます。
　

■buttons プロパティについて

　
buttons プロパティは、将来標準化される予定の機能です。
　
現状では、一部のブラウザでしか動作しません。
　
buttons プロパティは、InternetExplorer 8 以前では未対応です。
　
■得られる数値について
　
buttons プロパティは、現在のマウスボタンの純粋な押下状態を意味しています。
　
以下の数値を、論理和した結果が得られます。
　
複数のマウスボタンの同時押しの判別が可能です。
　
例えば、3 が得られた場合、マウスの左ボタンと右ボタンが両方押されています。
　
数値 解説
1 (00000001) マウス左ボタンが押されている
2 (00000010) マウス右ボタンが押されている
4 (00000100) マウス中央ボタンが押されている
　
■取得例
　
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 プロパティについて

　
button プロパティは、主要なブラウザで動作します。
　
多くのブラウザでは、一般的な仕様で動作します。
　
InternetExplorer の場合、専用の仕様（旧仕様）で動作する場合があります。
　
■InternetExplorer での動作仕様について
　
マウスイベントが、旧仕様で動作する条件については、こちらで解説しています。
　
イベントリスナーを利用している場合、必ず一般的な仕様で動作します。
　
アタッチイベントを利用している場合、必ず旧仕様で動作します。
　
イベントハンドラを利用している場合、判別は困難です。
　
ドキュメントモードのバージョンによって、仕様が切り替わるからです。
　
■一般的なブラウザの場合（一般的な仕様）
　
button プロパティから得られる値は、イベントの対象となるマウスボタンの種類を意味します。
　
以下の数値を取得することができます。
　
数値 解説
0 マウス左ボタンに変化があった（マウスボタンに変化がない場合も 0 が得られる）
1 マウス中央ボタンに変化があった
2 マウス右ボタンに変化があった
　
必ずしも、現在のマウスボタンの押下状態を意味しているとは限りません。
　
例えば、onmousedown イベント中に、1 が得られた場合、中央ボタンが押されています。
　
例えば、onmouseup イベント中に、1 が得られた場合、中央ボタンが離されています。
　
論理和では無いため、複数同時の変化の判別ができません。
　
かわりに、複数回に分けてイベントが発行されます。
　
■InternetExplorer 専用の仕様（旧仕様）
　
button プロパティから得られる値は、イベントの対象となるマウスボタンの種類を意味します。
　
以下の数値を、論理和した結果が得られます。
　
数値 解説
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("マウス中央ボタンが離された");
}
　

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

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

// ------------------------------------------------------------
// マウスボタンの入力状態を調べるコンストラクタ
// ------------------------------------------------------------
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;

}
　

上に戻る

　

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

　
　

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


FireFox は、DOMMouseScroll イベントを使用します。
　
それ以外のブラウザは、onmousewheel イベントを使用します。
　
標準化予定の、onwheel イベントもあります。
　
■取得例
　
イベントリスナーを使って、マウスホイールの回転量を調べる

// ------------------------------------------------------------
// マウスホイールを回すと実行される関数
// ------------------------------------------------------------
function MouseWheelFunc(e,delta){
	console.log("マウスホイールを回した:" + delta);
}


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

	// MouseScrollEvent に対応している（FireFox 専用）
	if(window.MouseScrollEvent){

		// マウスホイールを回すと実行されるイベント（FireFox 専用）
		document.addEventListener("DOMMouseScroll" , function (e){
			MouseWheelFunc(e , e.detail);
		});

	// FireFox 以外の主要ブラウザの場合
	}else{

		// マウスホイールを回すと実行されるイベント (非標準)
		document.addEventListener("mousewheel" , function (e){
			MouseWheelFunc(e , -(e.wheelDelta / 40));
		});

	}

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

	// マウスホイールを回すと実行されるイベント (非標準)
	document.attachEvent("onmousewheel" , function (e){
		MouseWheelFunc(e , -(e.wheelDelta / 40));
	});

}
　
　
■MouseWheelEvent について（非標準）
■MouseScrollEvent について（FireFox 専用）
■WheelEvent について（標準化予定）
　


■MouseWheelEvent イベントについて（非標準）

　
マウスホイールの回転を取得するには、onmousewheel イベントを使用します。
　
登録したコールバック関数の引数から、MouseWheelEvent オブジェクトが得られます。
　
FireFox は、onmousewheel イベントに対応していません。
　
かわりに、MouseScrollEvent を使用します。
　
マウスホイールを回転すると実行されるイベント

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

	// 出力テスト
	console.log(e);
};
　
■MouseWheelEvent オブジェクトについて
　
MouseWheelEvent オブジェクトには、以下のプロパティがあります。（主要ブラウザで取得可）
　
プロパティ 型 解説
wheelDelta Number マウスホイールの回転量。120 ずつ増減。正の値で上方向に回転、負の値で下方向に回転。
　
■イベントリスナーやアタッチイベントを使って取得する例
　
イベントリスナーを使って、マウスホイールの回転量を調べる

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

	// 出力テスト
	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 / 40);

	// 出力テスト
	console.log("delta:" + delta);
};
　
■任意のエレメントにコールバック関数を登録した場合
　
マウスカーソルとエレメントが重なっているときのみ、イベントが動作します。
　
任意のエレメントにコールバック関数を登録する

<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.onmousewheel = function (e){
		if(!e) e = window.event; // レガシー

		alert("マウスホイールを回転した");
	};
    //-->
    </script>

  </body>
</html>
　
■マウスホイールの回転によるスクロールを無効化する
　
MouseWheelEvent オブジェクトの、preventDefault() メソッドを実行します。
　
DOM Events 非対応環境では、false 値を返却します。
　
マウスホイールの回転によるスクロールをキャンセルする

// ------------------------------------------------------------
// マウスホイールを回転すると実行される関数
// ------------------------------------------------------------
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 専用）


FireFox 専用 のイベントです。
　
FireFox にて、マウスホイールの回転を取得する場合は、DOMMouseScroll イベントを使用します。
　
登録したコールバック関数の引数から、MouseScrollEvent オブジェクトが得られます。
　
マウスホイールを回転すると実行されるイベント

// MouseScrollEvent に対応している（FireFox 専用）
if(window.MouseScrollEvent){

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

		// 出力テスト
		console.log(e);
	});
}
　
■MouseScrollEvent オブジェクトについて
　
MouseScrollEvent オブジェクトには、以下のプロパティがあります。
　
プロパティ 型 解説
detail Number マウスホイールの回転量。3 ずつ増減。正の値で下方向に回転、負の値で上方向に回転。
　
■取得例
　
マウスホイールの回転量を調べる（FireFox 専用）

// MouseScrollEvent に対応している（FireFox 専用）
if(window.MouseScrollEvent){

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

		// 回転量
		var delta = e.detail;

		// 出力テスト
		console.log("delta:" + delta);
	});
}
　
■任意のエレメントにコールバック関数を登録した場合
　
マウスカーソルとエレメントが重なっているときのみ、イベントが動作します。
　
任意のエレメントにコールバック関数を登録する

<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");

	// MouseScrollEvent に対応している（FireFox 専用）
	if(window.MouseScrollEvent){

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

			alert("マウスホイールを回転した");

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

  </body>
</html>
　
■マウスホイールの回転によるスクロールを無効化する
　
MouseScrollEvent オブジェクトから、preventDefault() メソッドを実行します。
　
マウスホイールの回転によるスクロールをキャンセルする

// MouseScrollEvent に対応している（FireFox 専用）
if(window.MouseScrollEvent){

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

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

	});
}
　

■ホイールイベントについて

　
標準化予定のイベントです。
　
http://www.w3.org/TR/DOM-Level-3-Events/#interface-WheelEvent (Working Draft)
　
ホイールの操作を監視するには、onwheel イベントを使用します。
　
登録したコールバック関数の引数から、WheelEvent オブジェクトが得られます。
　
ホイールを回転すると実行されるイベント

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

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

		// 出力テスト
		console.log(e);
	});
}
　
■ WheelEvent オブジェクトのプロパティについて
　
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>
　
■ホイール操作によるスクロールを無効化する
　
WheelEvent オブジェクトから、preventDefault() メソッドを実行します。
　
ホイール操作によるスクロールをキャンセルする

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

	// ------------------------------------------------------------
	// ホイールを操作すると実行されるイベント
	// ------------------------------------------------------------
	document.addEventListener("wheel" , 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>
　
■コンテキストメニューの表示を無効化する
　
MouseEvent オブジェクトの、preventDefault() メソッドを実行します。
　
DOM Events 非対応環境では、false 値を返却します。
　
コンテキストメニューの表示をキャンセルする

// ------------------------------------------------------------
// コンテキストメニューが表示される直前に実行される関数
// ------------------------------------------------------------
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") 』値を指定します。
　
カンマで区切って、複数の候補を指定する事もできます。
　
候補の最後に、汎用カーソル値を、必ず１つ含める必要があります。
　
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>
　

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


カーソル用の画像を、常にマウスカーソルの位置に表示します。
　
■マウスカーソルのイメージ画像を用意する

new 演算子を使って、Image コンストラクタをインスタンス化します。
　
画像イメージについては、こちらで解説しています。
　
イメージエレメントを作成

// HTMLImageElement オブジェクトを作成する
var image = new Image();
　
src プロパティに画像の URL を指定すると、その画像の読み込みを開始します。
　
画像の読み込みを開始

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

// URL を指定して、画像の読み込みを開始する
image.src = "http://hakuhin.jp/cursor.png";
　
appendChild() メソッドを使用して、BODY のノードリストに登録します。
　
任意のエレメントをノードリストに登録する方法については、こちらで解説しています。
　
BODY のノードリストに登録

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

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

// BODY のノードリストに登録
document.body.appendChild(image);
　
スタイルシートの position を "fixed" に変更します。
　
エレメントの配置については、こちらで解説しています。
　
body に配置

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

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

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

// スタイルシートの position を "fixed" に設定
image.style.position = "fixed";
　
■マウス座標をエレメントの位置に反映する

クライアント座標系の、マウスカーソルの位置を取得する方法については、こちらで解説しています。
　
エレメントの移動については、こちらで解説しています。
　
マウスカーソルの座標をエレメントの位置に反映する

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

// URL を指定して、画像の読み込みを開始する
image.src = "http://hakuhin.jp/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 イベントは、マウス操作だけでなく、エンターキー操作も含まれます。
　
■ハイパーリンクを無効化する
　
こちらで解説しています。
　

上に戻る
　
　
前のページに戻る