在 Vue 3 中，可通过 @click.exact 与 @click.shift 组合绑定同一元素，实现「仅 Shift+Click 触发 aaa()，纯 Click（无任何修饰键）触发 bbb()」，避免事件重叠执行。
在 vue 3 中，可通过 `@click.exact` 与 `@click.shift` 组合绑定同一元素，实现「仅 shift+click 触发 aaa()，纯 click（无任何修饰键）触发 bbb()」，避免事件重叠执行。
在 Vue 3 的事件处理体系中，当为同一 DOM 元素（如 <div>）同时绑定多个 @click 相关监听器时，默认行为是“全部触发”——例如 <div @click.shift="aaa()" @click="bbb()"> 在 Shift+Click 时会先后执行 aaa() 和 bbb()，这显然违背了语义隔离的设计初衷。
解决该问题的关键在于使用 Vue 内置的 .exact 事件修饰符。它能严格限定触发条件：仅当用户操作完全匹配指定的修饰键组合（且不包含额外修饰键） 时，对应事件处理器才会执行。
✅ 正确写法如下：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
<template>
<div
@click.shift="aaa()"
@click.exact="bbb()"
class="interactive-box"
>
点击区域（Shift+Click 执行 aaa，纯 Click 执行 bbb）
</div>
</template>
<script setup>
const aaa = () => {
console.log('✅ Shift+Click 触发：执行 aaa()');
};
const bbb = () => {
console.log('✅ 纯 Click 触发（无 Ctrl/Alt/Shift）：执行 bbb()');
};
</script>? 行为说明：
立即学习“前端免费学习笔记（深入）”；
- @click.shift：在按下 Shift 键的同时点击 → 触发 aaa()；
- @click.exact：仅当没有任何系统修饰键（Shift/Ctrl/Alt/Meta）被按下时才触发 → 严格排除 Shift+Click、Ctrl+Click、Alt+Click 等所有组合，确保 bbb() 不被误触发。
⚠️ 注意事项：
- .exact 是“全量匹配”修饰符，不是“排除某一个”。因此 @click.exact 等价于 @click.no-modifiers，它不会响应任何含修饰键的点击；
- 若需支持「Ctrl+Click 或 Alt+Click 也触发 bbb()」，则不能依赖 .exact，而应统一用单个处理函数 + event 对象判断：
const handleClick = (e) => { if (e.shiftKey) return aaa(); if (e.ctrlKey || e.altKey || e.metaKey) return; bbb(); // 仅纯点击（或按需扩展逻辑） }; - .exact 仅适用于原生 DOM 事件修饰符场景，不适用于自定义事件；
- 所有修饰符（.stop、.prevent、.capture、.self、.once、.passive、.exact）可链式组合，如 @click.exact.prevent，但 .exact 必须位于修饰符链末尾。
? 总结：
当需要在同一元素上语义化区分「带修饰键点击」与「基础点击」时，@click.exact 是 Vue 3 提供的最简洁、声明式、无需手动判断 event 的标准解法。它让事件逻辑更清晰、可维护性更强，是构建专业级交互体验的重要实践。
