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

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>

インデックスにもどる