JavaSctiptでのマウスボタン操作
onClickで左クリック時の処理を行うのはわかっている
右クリック時の処理や、マウスによって中央ボタン(ホイールボタン)でのクリック時の処理方法がわからない
↓
button エレメントのmousedownイベントによいってイベントを発火させてあげる
code:button.tsx
<button onMouseDown={関数} >ボタン</button>
click イベントとの違いは、 click イベントが完全なクリック操作の後、つまり、同じ要素内でマウスのボタンが押されて離された後で発行されることです。 mousedown はボタンが最初に押された時点で発行されます。(MDN: https://developer.mozilla.org/ja/docs/Web/API/Element/mousedown_event)
onMouseDownのeventからbuttonの中身を見ると
左クリック: 0
右クリック: 2
中央クリック: 1
となっている
code: button.tsx
<button
onMouseDown={ev => {
switch (ev.button) {
case 0: {
console.log("左クリックです。");
break;
}
case 1: {
console.log("中央クリックです。");
break;
}
case 2: {
console.log("右クリックです。");
break;
}
}
}}