在 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 元素（如

）同时绑定多个 @click 相关监听器时，默认行为是“全部触发”——例如

在 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 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 的标准解法。它让事件逻辑更清晰、可维护性更强，是构建专业级交互体验的重要实践。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！