JavaScript 中怎么区分鼠标的左键、中键与右键点击事件-js教程-PHP中文网

推荐使用 mousedown 事件配合 event.button 判断鼠标按键：0 为左键、1 为中键、2 为右键；click 对中键支持差，auxclick 更适合非主键，event.buttons 用于检测多键同时按下状态。

javascript 中怎么区分鼠标的左键、中键与右键点击事件

在 JavaScript 中，可以通过 event.button 属性或 event.buttons（用于判断按下状态）来区分鼠标左键、中键和右键点击。最常用且兼容性好的方式是监听 mousedown 或 click 事件，并检查 event.button 的值。

使用 event.button 判断按键（推荐）

event.button 是一个数字，表示触发事件时按下的鼠标按键：

0：左键（主按键，绝大多数鼠标默认）
1：中键（滚轮按键）
2：右键（辅助按键）

注意：click 事件在某些浏览器中对中键支持不一致（例如 Chrome 中中键 click 可能不触发），所以更可靠的方式是监听 mousedown 或 mouseup。

示例：

element.addEventListener('mousedown', function(e) {
  if (e.button === 0) {
    console.log('左键按下');
  } else if (e.button === 1) {
    console.log('中键按下');
  } else if (e.button === 2) {
    console.log('右键按下');
  }
});

兼容旧版 IE 的写法（可选）

IE8 及更早版本使用 event.button 的值不同（如左键为 1，右键为 2，中键为 4），但现代开发已无需兼容这些版本。若必须支持，可用以下逻辑归一化：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

function getMouseButton(e) {
  e = e || window.event;
  if (e.button !== undefined) {
    // 标准浏览器：0=左, 1=中, 2=右
    return e.button;
  }
  // IE8-：1=左, 2=右, 4=中 → 转换为标准值
  return {1: 0, 2: 2, 4: 1}[e.button] || -1;
}

避免混淆：click vs mousedown

实际开发中要注意：

click 事件只在左键“按下并释放”后触发；中键和右键一般不会触发 click（右键会打开上下文菜单，中键可能滚动或打开新标签）
contextmenu 事件专门捕获右键点击（在 click 前触发），常用于自定义右键菜单
auxclick 是较新的事件，专门用于非主按键（如中键、侧键），兼容性较好（Chrome 55+, Firefox 53+, Edge 79+）

示例（用 auxclick 捕获中键）：

element.addEventListener('auxclick', function(e) {
  if (e.button === 1) {
    e.preventDefault(); // 阻止中键默认行为（如打开新标签）
    console.log('中键被点击');
  }
});