Vue 3 提供 .exact 事件修饰符，可严格限定仅在无任何系统修饰键（如 Shift、Ctrl、Alt）按下时触发普通点击事件，从而避免与 @click.shift 冲突，实现两类点击逻辑的完全解耦。
vue 3 提供 `.exact` 事件修饰符，可严格限定仅在无任何系统修饰键（如 shift、ctrl、alt）按下时触发普通点击事件，从而避免与 `@click.shift` 冲突，实现两类点击逻辑的完全解耦。
在 Vue 3 开发中，常需为同一 DOM 元素区分不同按键组合的点击行为（例如：普通左键单击执行编辑，Shift+单击执行多选）。若直接使用
，会发现 Shift+Click 时两个处理器均被触发——这是因为原生事件冒泡机制未被阻断，且 Vue 默认的 @click 并不自动排除带修饰键的点击。
✅ 正确解法：使用 .exact 修饰符
.exact 是 Vue 官方提供的精准控制修饰符，它要求事件触发时必须严格匹配指定的修饰键组合（或完全无修饰键）。因此：
<template><div class="item">
双击此处测试不同点击行为
</div>
</template><script setup>
import { defineEmits } from 'vue'
const emits = defineEmits(['edit', 'select'])
const editItem = () => {
console.log('✅ 普通点击：进入编辑模式')
emits('edit')
}
const selectMultiple = () => {
console.log('✅ Shift+点击：添加到选中列表')
emits('select')
}
</script>
? 关键说明：
- @click.exact → 仅当没有任何修饰键（Shift/Ctrl/Alt/Meta）被按下时才触发，因此 Shift+Click 不会激活它；
- @click.shift → 仅在 Shift 键 + 单击时触发，互不干扰；
- ❌ 错误写法：@click.stop 或 @click.prevent 无法解决该问题，因为它们作用于事件传播/默认行为，而非修饰键判定；
- ❌ @click.shift.stop 也不能阻止 @click 触发——.stop 阻止的是事件向父级冒泡，而非同级多个 @click 监听器的执行。
? 进阶提示：
若还需支持 Ctrl+Click（如反向选择）、Alt+Click 等，可组合使用：
@click.ctrl="toggleSelection" @click.alt="showDetails" @click.exact="editItem" <!-- 仅纯点击 -->
此时三者完全正交，无交叉触发风险。
? 总结：
Vue 3 的 .exact 修饰符是处理“多修饰键点击共存”场景的标准且优雅方案。它无需手动判断 event.shiftKey、不增加条件分支逻辑、不耦合事件处理函数，真正实现了声明式、可读性强、易于维护的事件控制。务必优先选用 .exact，而非自行封装条件判断函数——这既是 Vue 响应式设计哲学的体现，也是官方推荐的最佳实践。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
