Question

我有一个Vue.js应用程序。在这个应用程序中，我想使用左，中，右mouse modifiers。我已经能够成功地使左修改器工作，如Fiddle所示。但是，我似乎无法使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修饰符的事件处理程序。我究竟做错了什么？我错过了什么？

Answer 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/

Vue.js - 鼠标事件修饰符

1 个答案: