VueJS中的右键单击和右键单击事件

Question

我正在使用vue 2.1.10.

我正在使用@contextmenu事件来检测右键单击事件.

但我想检测右键上下事件.

我怎样才能做到这一点？

Answer 1

随着V2.2的,你可以听使用鼠标右键单击事件right修饰符(和阻止的默认行为,contextmenu事件通过prevent修改):

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

这是一个工作小提琴.

如果您未使用v2.2或更高版本,则可以使用whichclick事件的属性手动检查鼠标右键:

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

这是一个工作小提琴.