buttonプロパティは、マウスイベントが発生した際に押したボタンは、マウスのどのボタンであるかを示す数値を返すプロパティ。
構文
event.button
戻り値
マウスイベントが発生した際に押したボタンは、マウスのどのボタンであるかを示す数値。
- 「0」：左ボタン。
- 「1」：中央ボタン。
- 「2」：右ボタン。
サンプル
サンプルの動作について
- 「サンプルボタン」ボタンをマウスの左ボタンでクリックすると、ボタンの右横の数値に「左クリック」と表示する。
- 「サンプルボタン」ボタンをマウスの中央ボタンでクリックすると、ボタンの右横の数値に「中央クリック」と表示する。
- 「サンプルボタン」ボタンをマウスの右ボタンでクリックすると、ボタンの右横の数値に「右クリック」と表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
window.onload = function () {
document.getElementById( "sampleButton" ).onmousedown = function( $event ){
sampleFn( $event );
};
}
function sampleFn( $event ) {
if( $event.button == 0 ){
document.getElementById( "sampleOutput" ).innerHTML = "左クリック";
}else if( $event.button == 1 ){
document.getElementById( "sampleOutput" ).innerHTML = "中央クリック";
}else{
document.getElementById( "sampleOutput" ).innerHTML = "右クリック";
}
}
</script>
window.onload = function () {
document.getElementById( "sampleButton" ).onmousedown = function( $event ){
sampleFn( $event );
};
}
function sampleFn( $event ) {
if( $event.button == 0 ){
document.getElementById( "sampleOutput" ).innerHTML = "左クリック";
}else if( $event.button == 1 ){
document.getElementById( "sampleOutput" ).innerHTML = "中央クリック";
}else{
document.getElementById( "sampleOutput" ).innerHTML = "右クリック";
}
}
</script>
HTML
<p>
<button id="sampleButton">サンプルボタン</button>
<span id="sampleOutput" style="margin-left: 10px;"></span>
</p>
<button id="sampleButton">サンプルボタン</button>
<span id="sampleOutput" style="margin-left: 10px;"></span>
</p>