鼠标事件：button 属性

基线广泛可用

此功能已得到完善，可在许多设备和浏览器版本上运行。它自以下时间起在各个浏览器中可用： 2015 年 7 月.

MouseEvent.button 只读属性指示触发事件时按下的是哪个鼠标按钮。

此属性仅保证指示按下或释放一个或多个按钮时由按下按钮引起的事件期间按下了哪些按钮。因此，对于诸如 mouseenter、mouseleave、mouseover、mouseout 或 mousemove 这样的事件，它不可靠。

用户可能会更改其指向设备上按钮的配置，因此，如果事件的 button 属性为零，则它可能不是由指向设备上物理上最左边的按钮引起的；但是，它应该表现得好像在标准按钮布局中单击了左按钮。

注意：不要将此属性与 MouseEvent.buttons 属性混淆，后者指示所有鼠标事件类型期间按下了哪些按钮。

值

表示给定按钮的数字

0：按下主按钮，通常是左按钮或未初始化状态
1：按下辅助按钮，通常是滚轮按钮或中间按钮（如果存在）
2：按下次要按钮，通常是右按钮
3：第四个按钮，通常是“浏览器后退”按钮
4：第五个按钮，通常是“浏览器前进”按钮

如上所述，按钮的配置可能与标准的“从左到右”布局不同。配置为左撇子使用的鼠标可能反转了按钮操作。某些指向设备只有一个按钮，并使用键盘或其他输入机制来指示主、次、辅助等。其他设备可能有多个按钮映射到不同的功能和按钮值。

示例

HTML

html

<button id="button" oncontextmenu="event.preventDefault();">
  Click here with your mouse…
</button>
<p id="log"></p>

JavaScript

let button = document.querySelector("#button");
button.addEventListener("mouseup", (e) => {
  let log = document.querySelector("#log");
  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}`;
  }
});

结果

规范

规范
用户界面事件 # dom-mouseevent-button

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅

鼠标事件