Problem: Das @mouse-down-Ereignis von Vue wird nicht ausgelöst

Question

Ich bin neu in der Webentwicklung und habe ein Problem mit Vue. Aus dem Tutorial habe ich gelernt, dass Sie @click verwenden können, wenn die Schaltfläche gedrückt wird. Es funktioniert sehr gut.

Jetzt möchte ich eine einfache Messung durchführen, die das Drücken und Heben der Maus erkennt, um die Detektoren für Doppelklicks und langes Drücken weiterzuentwickeln (ich habe auch herausgefunden, dass ich @double-click verwenden kann, aber aus unbekannten Gründen funktioniert es auch nicht ). Können Sie erklären, was ich falsch mache?

Hinweis: Ich weiß, dass es viele Pakete gibt, die dieses Problem lösen, aber ich möchte es möglichst einfach halten.

<script>
export default {
  data() {
    return {
      counter: 0,
    }
  },
  methods: {
    greet(event) {
      this.counter = 2
    }
  }
}
</script>

<template>
  <button @mouse-down="greet">问候 {{ counter }}</button>
</template>

Answer 1

事件名称是"@mousedown"而不是"@mouse-down"

<button @mousedown="greet">问候 {{ counter }}</button>

但是要小心处理这个事件。它处理所有的鼠标按钮（左键、中键、右键），并且在按下任何一个按钮时调用。

要处理只有一个按钮按下的事件，你应该使用".left"或".right"修饰符。

例如：

<button @mousedown.left="greet">问候 {{ counter }}</button>

它只会在左键按下时处理。