MouseEvent: buttons 屬性
MouseEvent.buttons 只讀屬性表示在觸發滑鼠事件時，滑鼠（或其他輸入裝置）上按下了哪些按鈕。當滑鼠事件被觸發時，該屬性會指示當前按下的滑鼠按鈕狀態。
每個可按下的按鈕都由一個特定的數字表示（如下所示）。如果同時按下多個按鈕，則按鈕的值會相加得到一個新的數字。例如，如果同時按下輔助（2）和中間（4）按鈕，則值為 6（即 2 + 4）。
注意： 不要將此屬性與 MouseEvent.button 屬性混淆。MouseEvent.buttons 屬性指示在任何型別的滑鼠事件期間按下的按鈕狀態，而 MouseEvent.button 屬性僅保證由按下或釋放一個或多個按鈕引起的滑鼠事件具有正確的值。
值
一個表示一個或多個按鈕的數字。如果同時按下多個按鈕，則值會被合併（例如，3 表示主按鈕 + 次按鈕）。
0：無按鈕或未初始化1：主按鈕（通常是左鍵）2：次按鈕（通常是右鍵）4：輔助按鈕（通常是滑鼠滾輪按鈕或中鍵）8：第 4 個按鈕（通常是“瀏覽器後退”按鈕）16：第 5 個按鈕（通常是“瀏覽器前進”按鈕）
示例
此示例在觸發 mousedown 事件時，會記錄 buttons 屬性。
HTML
html
<p>Click anywhere with one or more mouse buttons.</p>
<pre id="log">[No clicks yet]</pre>
JavaScript
js
const buttonNames = ["left", "right", "wheel", "back", "forward"];
function mouseButtonPressed(event, buttonName) {
// Use binary `&` with the relevant power of 2 to check if a given button is pressed
return Boolean(event.buttons & (1 << buttonNames.indexOf(buttonName)));
}
function format(event) {
const { type, buttons } = event;
const obj = { type, buttons };
for (const buttonName of buttonNames) {
obj[buttonName] = mouseButtonPressed(event, buttonName);
}
return JSON.stringify(obj, null, 2);
}
const log = document.getElementById("log");
function logButtons(event) {
log.textContent = format(event);
}
document.addEventListener("mouseup", logButtons);
document.addEventListener("mousedown", logButtons);
結果
規範
| 規範 |
|---|
| UI 事件 # dom-mouseevent-buttons |
瀏覽器相容性
載入中…
Firefox 注意事項
Firefox 在 Windows、Linux (GTK) 和 macOS 上支援 buttons 屬性，但有以下限制：
- 實用程式允許自定義按鈕操作。因此，裝置上的主按鈕可能不是左鍵，次按鈕可能不是右鍵，依此類推。此外，即使按下了中鍵（滾輪）、第 4 個按鈕和第 5 個按鈕，它們的值也可能未分配。
- 單按鈕裝置可能透過組合按鈕和鍵盤按鍵來模擬其他按鈕。
- 觸控裝置可能透過可配置的手勢來模擬按鈕（例如，單指觸控表示主按鈕，雙指觸控表示次按鈕等）。
- 在 Linux (GTK) 上，不支援第 4 個按鈕和第 5 個按鈕。此外，
mouseup事件在buttons值中始終包含釋放的按鈕資訊。 - 在 Mac OS X 10.5 上，
buttons屬性始終返回0，因為沒有平臺 API 來實現此功能。