鼠标事件：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);
结果
规范
| 规范 |
|---|
| 用户界面事件 # dom-mouseevent-buttons |
浏览器兼容性
BCD 表格仅在启用 JavaScript 的浏览器中加载。
Firefox 说明
Firefox 在 Windows、Linux (GTK) 和 macOS 上支持 buttons 属性，但存在以下限制
- 实用程序允许自定义按钮操作。因此，主按钮可能不是设备上的左按钮，辅助按钮可能不是右按钮，依此类推。此外，中间（滚轮）按钮、第 4 个按钮和第 5 个按钮可能未分配值，即使它们被按下。
- 单按钮设备可以通过按钮和键盘按键组合模拟其他按钮。
- 触摸设备可以通过可配置的手势模拟按钮（例如，一个手指触摸表示主按钮，两个手指触摸表示辅助按钮，等等）。
- 在 Linux (GTK) 上，不支持第 4 个按钮和第 5 个按钮。此外，
mouseup事件始终在buttons值中包含释放按钮的信息。 - 在 Mac OS X 10.5 上，
buttons属性始终返回0，因为没有用于实现此功能的平台 API。