MouseEvent: button 屬性
MouseEvent.button 只讀屬性指示觸發事件的滑鼠按鈕是按下還是釋放。
此屬性僅保證在按下或釋放一個或多個按鈕引起的事件中指示哪些按鈕被按下或釋放。因此，對於 mouseenter、mouseleave、mouseover、mouseout 或 mousemove 等事件，它並不可靠。
使用者可能會更改其指標裝置的按鈕配置，因此如果事件的 button 屬性為零，它可能不是由指標裝置上物理最左側的按鈕引起的；但是，它應該表現得好像在標準按鈕佈局中單擊了左按鈕。
注意：請勿將此屬性與 MouseEvent.buttons 屬性混淆，該屬性指示所有滑鼠事件型別中按下的按鈕。
值
表示給定按鈕的數字
0：主按鈕，通常是左按鈕或未初始化狀態1：輔助按鈕，通常是滾輪按鈕或中按鈕（如果存在）2：次按鈕，通常是右按鈕3：第四個按鈕，通常是瀏覽器後退按鈕4：第五個按鈕，通常是瀏覽器前進按鈕
如上所述，按鈕的配置可能與標準的“從左到右”佈局不同。為左手使用者配置的滑鼠可能會反轉按鈕操作。某些指標裝置只有一個按鈕，並使用鍵盤或其他輸入機制來指示主按鈕、次按鈕、輔助按鈕等。其他裝置可能有許多按鈕對映到不同的功能和按鈕值。
示例
HTML
html
<button id="button">Click here with your mouse…</button>
<p id="log"></p>
JavaScript
js
const button = document.querySelector("#button");
const log = document.querySelector("#log");
button.addEventListener("mouseup", (e) => {
switch (e.button) {
case 0:
log.textContent = "Left button clicked.";
break;
case 1:
log.textContent = "Middle button clicked.";
break;
case 2:
log.textContent = "Right button clicked.";
break;
default:
log.textContent = `Unknown button code: ${e.button}`;
}
});
button.addEventListener("contextmenu", (e) => {
e.preventDefault();
});
結果
規範
| 規範 |
|---|
| UI 事件 # dom-mouseevent-button |
瀏覽器相容性
載入中…