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

Question

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

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

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

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

Edit

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

Answer 1

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

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

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

以this pen为例

如果有效，请告诉我。