Vue.js 3中单个HTML元素双点击事件的冲突解决方法咨询

直接给普通点击事件加上.exact修饰符，这样只有在**没有按下任何修饰键（Shift/Ctrl/Alt等）**的单纯点击时，才会触发bbb()；按住Shift点击时，只会触发aaa()，不会再触发bbb()。

修改后的代码：

<div @click.shift="aaa()" @click.exact="bbb()">...</div>

原理说明 #

Vue的.exact修饰符用于精确控制事件触发的条件，它会忽略任何额外的修饰键。也就是说，只有当点击动作完全符合绑定的事件条件（这里就是单纯的鼠标点击，无修饰键）时，才会执行对应的回调函数。这样就区分开了Shift+点击和普通点击的触发逻辑，不需要合并两个函数。

内容的提问来源于stack exchange，提问作者Zsolti Vagyok