HTML | DOM MouseEvent 按钮属性

介绍

在 HTML 和 DOM 中，MouseEvent 按钮属性用于获取触发鼠标事件的按钮的相关信息。这些属性可以帮助开发人员在处理鼠标事件时确定是由哪个按钮触发的。

MouseEvent 按钮属性列表

以下是常用的 MouseEvent 按钮属性：

• event.button: 返回触发鼠标事件的按钮的数字值。
• event.buttons: 返回一个表示触发鼠标事件时按下的所有按钮的状态的数字值。
• event.which: 返回一个表示触发鼠标事件的按钮的数字值，与 event.button 类似。

MouseEvent.button 属性

event.button 属性返回一个数字值，表示触发鼠标事件的按钮。

常见的 event.button 值有：

• 0: 表示主按钮（通常是鼠标左键）。
• 1: 表示辅助按钮（通常是鼠标中键）。
• 2: 表示次要按钮（通常是鼠标右键）。
• 3: 表示第四个按钮（通常是鼠标后退按钮）。
• 4: 表示第五个按钮（通常是鼠标前进按钮）。

示例代码：

document.addEventListener("click", function(event) {
  console.log("Button: " + event.button);
});

MouseEvent.buttons 属性

event.buttons 属性返回一个数字值，表示触发鼠标事件时按下的所有按钮的状态。通过检查每个按钮的位来确定哪些按钮被按下。

常见的 event.buttons 值有：

• 0: 没有按钮被按下。
• 1: 主按钮（通常是鼠标左键）被按下。
• 2: 辅助按钮（通常是鼠标中键）被按下。
• 4: 次要按钮（通常是鼠标右键）被按下。
• 8: 第四个按钮（通常是鼠标后退按钮）被按下。
• 16: 第五个按钮（通常是鼠标前进按钮）被按下。

示例代码：

document.addEventListener("mousedown", function(event) {
  console.log("Buttons: " + event.buttons);
});

MouseEvent.which 属性

event.which 属性与 event.button 类似，返回一个数字值，表示触发鼠标事件的按钮。

不同浏览器的 event.which 值可能会有所不同，所以在编写代码时应当谨慎使用。推荐使用 event.button 来获得按钮的信息。

示例代码：

document.addEventListener("mouseup", function(event) {
  console.log("Which button: " + event.which);
});

以上就是 HTML | DOM MouseEvent 按钮属性的介绍，通过这些属性，您可以轻松地获取和处理触发鼠标事件的按钮。