Vue 中可通过@click.middle监听鼠标中键单击事件，仅对click有效；mousedown/mouseup不支持.middle修饰符，需用e.button===1判断中键按下。
Vue 中可以通过 @click.middle 修饰符监听鼠标中键（滚轮按键）点击事件，但需注意：它只在 click 事件上生效，且触发条件是用户按下并释放中键（类似单击），不是单纯的按下（mousedown）或抬起（mouseup）。
middle 修饰符的正确写法
Vue 提供了三个鼠标按钮修饰符：.left、.right、.middle，它们只能配合 @click 使用：
-
@click.middle="handleMiddleClick"—— 仅当中键单击时触发 -
@click.left和@click.right同理，分别对应左键和右键单击 - 不支持
@mousedown.middle或@mouseup.middle，这些写法无效
为什么不能用 mousedown/mouseup 监听中键
浏览器原生的 mousedown 和 mouseup 事件本身支持通过 e.button 判断按键（0=左，1=中，2=右），但 Vue 并未为这两个事件提供 .middle 修饰符。若需精确捕获“按下中键瞬间”，应直接监听原生事件：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 使用
@mousedown="handleMousedown" - 在方法中检查
e.button === 1 - 例如：
handleMousedown(e) { if (e.button === 1) console.log('中键按下') }
实际使用建议
多数场景下，“中键点击”指用户像点链接一样按下并松开中键（常用于新标签页打开）。此时推荐用标准写法：
立即学习“前端免费学习笔记（深入）”；
<button @click.middle="openInNewTab">中键点我</button>- 该写法语义清晰，兼容性好，且自动过滤掉左/右键误触
- 注意：部分浏览器（如旧版 Safari）对中键 click 支持不稳定，生产环境建议加降级逻辑
需要区分“按下”和“点击”行为时，就绕过修饰符，用原生 button 值判断更可靠。
