vue.js - VueJS中的右键单击和右键单击事件

Question

我正在使用 vue 2.1.10。

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

但我想检测右键单击上下事件。

我该怎么做？

Answer 1

从 v2.2 开始，您可以使用 right modifier 监听鼠标右键单击事件。 (并使用 prevent modifier 阻止 contextmenu 事件的默认行为):

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

Here's a working fiddle.

---

如果您没有使用 v2.2 或更高版本，您可以使用点击事件的 which 属性手动检查鼠标右键单击:

<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.