Right click and right click in VueJS

Question

I am using vue 2.1.10.

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

But I want to detect right click and down events.

How can i do this?

Answer 1

As in version 2.2, you can listen for events with a click of the mouse using rightmodifier (and prevent the default behavior of the event contextmenuusing the preventmodifier ):

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

The violin works here.

---

If you are not using v2.2 or higher, you can manually check the right mouse click using the whichclick event property :

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

The violin works here.