Right clickup and right clickdown event in VueJS

Question

I am using vue 2.1.10.

I am using @contextmenu event to detect on right click events.

But I want to detect right click up and down events.

How can I do that?

Answer 1

As of v2.2, you can listen for right mouse click events using the right modifier (and prevent the default behavior of the contextmenu event by using the prevent modifier):

<button 
  @mousedown.right="mousedown" 
  @mouseup.right="mouseup" 
  @contextmenu.prevent
>
  Click Me
</button>

Here's a working fiddle.

---

If you aren't using v2.2 or above, you can manually check for the right mouse click using the which property of the click event instead:

<button 
  @mousedown="mousedown" 
  @mouseup="mouseup" 
  @contextmenu.prevent
>
  Click Me
</button>

methods: {
  mousedown(event) {
    if (event.which === 3) {
      console.log("Right mouse down");        
    }
  },
  mouseup(event) {
    if (event.which === 3) {
      console.log("Right mouse up");
    }
  }
}

Here's a working fiddle.