我想将2个鼠标点击事件绑定到一个div字段.一种是Shift+点击,另一种是常规点击.

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

问题是,当我在按住Shift键的同时单击div时,不仅会执行aaa(),还会执行bbb(). 我试着用了一些修饰语,例如.@click.shit.top或类似的,但bbb()在我单击div时一直在执行.我如何才能解决这个问题,而不是将两种点击事件分离在一个函数中,例如.调用aaa()或bbb()的ccc()?

推荐答案

您要寻找的是"精确"修饰语.

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

https://vuejs.org/guide/essentials/event-handling.html#exact-modifier

.exact修改器允许控制触发事件所需的系统修改器的精确组合.

因此,只有在没有使用修饰符的情况下才会触发此Click事件,并在触发@Click.Shift时将其排除在执行之外.请注意,这也会阻止Alt+Click、Ctrl+Click等.

Javascript相关问答推荐

如何在react + react路由域名中使用DeliverBrowserRouter?

除了在Angular 16中使用快照之外,什么是可行且更灵活的替代方案?

设置默认值后动态更新japbox或调色板

微软Edge Select 间隙鼠标退出问题

在页面上滚动 timeshift 动垂直滚动条

角色 map 集/spritebook动画,用户输入不停止在键上相位器3

如何调用名称在字符串中的实例方法?

还原器未正确更新状态

如何使onPaste事件与可拖动的HTML元素一起工作?

制作钢琴模拟器,并且在控制台中不会执行或显示该脚本

使用领域Web SDK的Vite+Vue应用程序中的Web程序集(WASM)错误

WhatsApp Cloud API上载问题:由于MIME类型不正确而导致接收&Quot;INVALID_REQUEST";错误

为什么这个.add.group({})在教程中运行得很好,但在我的游戏中就不行了?

Reaction组件在本应被设置隐藏时仍显示

元素字符串长度html

使用插件构建包含chart.js提供程序的Angular 库?

删除加载页面时不存在的元素(JavaScript)

删除元素属性或样式属性的首选方法

未捕获语法错误:Hello World中的令牌无效或意外

Node.js API-queryAll()中的MarkLogic数据移动