问题：Vue的@mouse-down事件未被触发

Question

我是web开发的新手，我在处理vue时遇到了问题。从教程中我学到，当按钮被按下时可以使用@click。它运行得很好。

现在我想做一个简单的测量，检测鼠标的按下和抬起，以便进一步开发双击和长按检测器（我也发现可以使用@double-click，但由于未知原因它也不起作用）。你能解释一下我做错了什么吗？

注意：我知道有很多处理这个问题的包，但如果可能的话，我想保持简单。

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

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