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 来实现此功能。