vue 3 中需用 @click.left、@contextmenu.prevent、@click.middle 分别监听左、右、中键；@click.right 无效，因右键不触发 click 事件。
Vue 3 中监听鼠标不同按键的点击，不能只靠 @click，因为默认 @click 只响应左键（且会忽略右键/中键触发）。要精准区分左、右、中键，需结合原生事件机制与 Vue 提供的修饰符或事件类型。
鼠标左键点击：用 @click.left 或直接 @click
-
@click默认就只响应左键，等价于@click.left - 推荐显式写
@click.left，语义更清晰，也避免后续误加.prevent或与其他修饰符混淆
<button>左键点我</button>
鼠标右键点击：用 @contextmenu + .prevent
- 浏览器原生右键触发的是
contextmenu事件，不是click.right - Vue 不支持
@click.right（该修饰符不存在，写了也不会生效） - 正确做法是监听
@contextmenu，并用.prevent阻止默认右键菜单
<div>右键点我</div>
注意：
.prevent很关键。漏掉会导致浏览器弹出默认菜单，同时你的 handler 仍会执行（但体验割裂）。
鼠标中键点击：用 @click.middle
- Vue 3 支持
.middle修饰符，对应鼠标滚轮按下动作 - 它基于原生
click事件的button === 1判断，兼容性良好（Chrome/Firefox/Edge 均支持）
<div>中键点我（滚轮按下）</div>
补充说明：为什么没有 @click.right？
- DOM 标准中，
click事件仅在主按钮（左键）释放时触发；右键和中键释放时不会触发click，而是分别触发contextmenu和auxclick（中键） - Vue 的
.left/.middle/.right修饰符其实是对event.button做过滤，但.right在click上永远不匹配（因为右键不发click） - 所以
@click.right是无效写法，应改用@contextmenu
实际组合建议
- 若需统一处理三键，可监听原生
mousedown并手动判断e.button：-
0→ 左键 -
1→ 中键 -
2→ 右键
-
- 但注意：
mousedown是按下即触发，而click/contextmenu是抬起后触发，行为逻辑不同，按需选择
<div> 三键都响应（按下时） </div>
function handleAnyButton(e) {
if (e.button === 0) handleLeft()
if (e.button === 1) handleMiddle()
if (e.button === 2) handleRight()
}
不复杂但容易忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
