Problem: Vue's @mouse-down event is not triggered

Question

I'm new to web development and I'm having trouble dealing with vue. From the tutorial I learned that you can use @click when the button is pressed. It works very well.

Now I want to make a simple measurement to detect mouse press and lift in order to further develop double click and long press detectors (I also found that it is possible to use @double-click but for unknown reasons it doesn't work either ). Can you explain what I'm doing wrong?

Note: I know there are many packages that deal with this problem, but I'd like to keep it simple if possible.

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

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

Answer 1

The event name is "@mousedown" instead of "@mouse-down"

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

But be careful with this event. It handles all mouse buttons (left, middle, right) and is called when any one of them is pressed.

To handle events with only one button pressed, you should use the ".left" or ".right" modifier.

For example:

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

It will only be processed when the left button is pressed.