問題：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>

它只會在左鍵按下時處理。