CODEWITHSUNDEEP
javascriptvue.js
Gary
Gary

Reputation: 273

Vue.js - Mouse Event Modifiers

I have a Vue.js app. In this app, I want to use the left, middle, and right mouse modifiers. I've been able to successfully get the left modifier to work as shown in this Fiddle. However, I can't seem to get the middle or right modifiers to work. The code in that Fiddle looks like this:

<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';    
    }
  }
})

What am I missing? I'd like to pop-up a little menu custom to the app when someone right clicks in the myCanvas area. However, as seen in the Fiddle, I can't even trigger the event handlers for the middle or right modifiers. What am I doing wrong? What am I missing?

Upvotes: 2

Views: 2049

Answers (1)

craig_h
craig_h

Reputation: 32704

That's interesting. The middle button works for me, but the right click doesn't and I have no idea why, but theoretically the right mouse modifier should just be an alias for contextmenu, so you could just use that instead:

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

Here's the JSFiddle: https://jsfiddle.net/pwmrgx6w/

Upvotes: 1

Related Questions