处理一个元素上的不同点击事件

Question

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

使用 https://v2.vuejs.org/v2/guide/events.html 作为参考

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

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

编辑

https://codepen.io/anon/pen/JVrGKo

Answer 1

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

无论如何，在触发 @click.ctrl 时触发@click确实是有道理的。但是，您可以使用 .exact 修饰符来防止这种情况发生，以便仅在使用确切组合时触发事件。喜欢这个：

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

以这支笔为例

让我知道这是否有效。