事件委托中应使用mousedown或contextmenu事件配合event.button区分鼠标键：0为左键、1为中键、2为右键；避免用click事件判断button，因其在右键时不可靠；右键推荐用contextmenu事件，语义明确且兼容性好。
在事件委托中区分鼠标左键、中键、右键，核心是监听父级元素的 mousedown 或 contextmenu 事件，并通过 event.button 属性判断按键类型。注意：不能用 click 事件可靠区分左右键，因为部分浏览器（如 Safari）在右键 click 中 event.button 恒为 0。
用 mousedown + event.button 实现精准识别
mousedown 事件在任意鼠标键按下时触发，且 event.button 值稳定可依赖：
- 0 → 左键（最常用）
- 1 → 中键（滚轮按压）
- 2 → 右键
示例：为列表项委托处理，只响应左键点击
document.getElementById('list').addEventListener('mousedown', function(e) {if (e.target.matches('li')) {
if (e.button === 0) {
console.log('左键点击了:', e.target.textContent);
} else if (e.button === 2) {
e.preventDefault(); // 防止默认右键菜单弹出
console.log('右键点击了:', e.target.textContent);
}
}
});
右键场景优先用 contextmenu 事件
右键点击天然触发 contextmenu 事件，语义明确、兼容性好，且自动屏蔽默认菜单（需手动 e.preventDefault() 才能自定义）：
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 它不依赖
button值，避免 IE/旧版 Edge 的 button 映射差异 - 键盘“菜单键”也会触发，更符合无障碍逻辑
- 适合统一接管右键行为（如弹出自定义菜单）
示例：委托给容器，拦截所有子元素右键
document.querySelector('.container').addEventListener('contextmenu', function(e) {if (e.target.closest('button, .item')) {
e.preventDefault();
showCustomMenu(e.clientX, e.clientY);
}
});
避免在 click 事件中判断 button
虽然部分浏览器支持，但 click 事件的 event.button 在右键时不可靠：
- Chrome/Firefox：右键 click 的
button多为 0（模拟左键） - Safari：右键 click 的
button总是 0 - 规范本身未要求 click 保留 button 状态，因此不应依赖
若业务必须用 click（如表单提交），应结合其他线索辅助判断，例如：
- 监听
contextmenu并标记“刚发生右键”，再配合 click 时间戳粗略过滤 - 检查
e.ctrlKey或e.shiftKey组合（非标准做法，仅作降级）
中键点击的特殊用途与注意事项
中键（滚轮按下）常用于新标签页打开链接，但需注意：
- 中键
mousedown的button === 1是跨浏览器稳定的 - 中键
click通常不会触发（除非用户特意双击滚轮） - 若要拦截中键跳转，建议在
mousedown中e.preventDefault()，并手动 window.open
示例：拦截中键，改为后台打开
list.addEventListener('mousedown', e => {if (e.button === 1 && e.target.tagName === 'A') {
e.preventDefault();
window.open(e.target.href, '_blank');
}
});
