JavaScript プログラミング講座


マウスの操作について



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

前のページに戻る

　

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

　
　
■マウスカーソルの座標を取得する（クライアント座標系）
■マウスカーソルの座標を取得する（グローバル座標系）
■マウスカーソルの座標を取得する（スクリーン座標系）
　

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

　
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 全体の、左上を原点とした座標系です。
　
１．マウスカーソルの座標を取得する（クライアント座標系）
　
こちらで解説しています。
　
２．ブラウザのスクロール位置を取得する
　
こちらで解説しています。
　
３．グローバル座標系に変換する
　
「クライアント座標」と「スクロール位置」を加算します。
　
すると、「グローバル座標」に変換できます。
　
■取得例（イベントリスナー）
　
クライアント座標系を基点としたマウスカーソルの座標を取得する

// ------------------------------------------------------------
// スクロール位置を取得する関数
// ------------------------------------------------------------
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("マウスがダブルクリックされた");
};
　

上に戻る

　

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

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


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


以下のプロパティを使用します。
　
プロパティ名型説明
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("マウス中央ボタンが離された");
}
　

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

　
基本的には、onmousedown と onmouseup イベントを使用します。
　
マウスボタンが押された瞬間と、離された瞬間を監視します。
　
■ 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;

}
　

上に戻る

　

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

　
　
■ WheelEvent について（Events Level3）
■ MouseWheelEvent について（非標準）
■ MouseScrollEvent について（非標準、Firefox 専用）
　

■標準化されたホイールイベント（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() メソッドを実行します。
　
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 専用）

　
■ 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() メソッドを実行します。
　
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>
　

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

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

// ------------------------------------------------------------
// 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 イベントは、マウス操作だけでなく、エンターキー操作も含まれます。
　
■ハイパーリンクを無効化する
　
こちらで解説しています。
　

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