押されたマウス・ボタンを特定する

mousedownまたはmouseupイベントが発生したとき、buttonプロパティによって
どのボタンが押されたかを数値として取得できる。

マウスイベントの種類

イベント名	内容
click	要素上でクリックされたとき。mousedown → mouseup → click
mousedown	要素上でボタンが押されたとき。
mouseup	要素上でボタンが離されたとき。
mouseover	要素上にカーソルが乗ったとき。
mouseout	要素上からカーソルが離れたとき。
mousemove	要素上でカーソルが移動したとき。
contextmenu	要素上で右クリックしたとき。

buttonプロパティ

値	押されたボタン
0	左ボタン
1	ホイール
2	右ボタン

buttonプロパティ（IE）

値	押されたボタン
0	押されてない
1	左ボタン
2	右ボタン
3	左右同時
4	ホイール
5	左とホイール
6	右とホイール
7	左右ホイール同時

[サンプル]

クリックしてみて

[ソースコード]

<script type="text/JavaScript">
window.addEventListener("load" , buttonReport);

function buttonReport(){
	var box = document.getElementById('box');
	box.addEventListener("mousedown" , mousedownReportReport);
	box.addEventListener("contextmenu" , contextmenuStop); // 右クリック禁止
}

function mousedownReportReport(evt){
	var report = "";
		if(evt.button == 0){
			report = "左ボタンを押しました";
		}else if(evt.button == 1){
			report = "ホイールを押しました";
		}else if(evt.button == 2){
			report = "右ボタンを押しました";
		}
	var box = document.getElementById('box');
	box.firstChild.nodeValue = report;
}

function contextmenuStop(evt){
	evt.preventDefault();
}
</script>

インデックスにもどる