Vue.js - 鼠标事件修饰符答案

【问题标题】：Vue.js - Mouse Event ModifiersVue.js - 鼠标事件修饰符
【发布时间】：2017-03-25 12:36:04
【问题描述】：

我有一个 Vue.js 应用程序。在这个应用程序中，我想使用左、中和右mouse modifiers。如Fiddle 所示，我已经能够成功地让left 修饰符工作。但是，我似乎无法让 middle 或 right 修饰符起作用。 Fiddle 中的代码如下所示：

<div id="myApp">
  <div id="myCanvas" v-on:click.left="onLeftClick" v-on:click.middle="onMiddleClick" v-on:click.right="onRightClick">

  </div>

  <br />
  <textarea v-model="log" rows="6"></textarea>
</div>

...

new Vue({
  el: '#myApp',
  data: { log:'' },

  created: function() {
    this.log = 'App Started\n';
  },

  methods: {      
    onLeftClick: function(e) {
      this.log += 'Left Button Clicked\n';
    },

    onMiddleClick: function(e) {
      this.log += 'Middle Button Clicked\n';
    },

    onRightClick: function(e) {
      this.log += 'Right Button Clicked\n';    
    }
  }
})

我错过了什么？当有人在myCanvas 区域单击鼠标右键时，我想弹出一个自定义应用程序的小菜单。但是，如小提琴中所见，我什至无法触发 middle 或 right 修饰符的事件处理程序。我究竟做错了什么？我错过了什么？

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

这很有趣。中间按钮对我有用，但右键单击不起作用，我不知道为什么，但理论上 right 鼠标修饰符应该只是 contextmenu 的别名，所以你可以改用它：

  <div id="myCanvas" v-on:click.left="onLeftClick" v-on:click.middle="onMiddleClick" v-on:contextmenu.prevent="onRightClick">

这是 JSFiddle：https://jsfiddle.net/pwmrgx6w/

【讨论】：