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 |
浏览器兼容性
加载中…