Vue.js 在一个元素上处理不同的单击事件

我正在尝试实现一个解决方案，它允许将3个不同的处理程序附加到一个元素上，但没有一个会触发其他处理程序

用作参考

<div @click.ctrl="methodA" @click="methodB" @contextmenu.ctrl="methodC"></div>

我已经尝试在每个面板上随机使用.stop修改器，但我无法阻止methodA在单击时也触发methodB。使用正确的方式/修饰符是什么，或者附加处理程序的顺序是否重要

编辑

---

有趣的是，我创建了自己的笔来测试这一点，我可以看到你在问题中描述的同样的事情也发生在那里，但是使用你创建的笔，我看不到这一点

无论如何，当@click.ctrl被触发时，@click被触发是有意义的。但是您可以通过使用来防止这种情况发生，因此只有在使用确切的组合时才会触发事件。像这样：

<div 
  @click.ctrl="methodA" 
  @click.exact="methodB"
  @contextmenu.ctrl="methodC"
></div>

举例

---

让我知道这是否有效。

这个问题可以通过添加代码笔或小提琴来改进，以便能够重现错误并使帮助您的任务更容易。根据请求添加代码笔示例sad。。。我应该读整个事件页面。我以前从未见过确切的修饰语。谢谢你指出。NP！这种事总是发生在我身上。