Problème : l'événement @mouse-down de Vue n'est pas déclenché

Question

Je suis nouveau dans le développement Web et j'ai un problème avec vue. Grâce au didacticiel, j'ai appris que vous pouvez utiliser @click lorsque vous appuyez sur le bouton. Il fonctionne très bien.

Maintenant, je souhaite effectuer une mesure simple qui détecte la pression et le soulèvement de la souris afin de développer davantage les détecteurs de double-clic et d'appui long (j'ai également découvert que je peux utiliser @double-clic, mais pour des raisons inconnues, cela ne fonctionne pas non plus ). Pouvez-vous expliquer ce que je fais de mal ?

Remarque : je sais qu'il existe de nombreux packages qui gèrent ce problème, mais j'aimerais que cela reste simple si 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

Le nom de l'événement est "@mousedown" au lieu de "@mouse-down"

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

Mais gérez cet événement avec prudence. Il gère tous les boutons de la souris (gauche, milieu, droite) et est appelé lorsque l'un d'entre eux est enfoncé.

Pour gérer les événements avec un seul bouton enfoncé, vous devez utiliser le modificateur ".left" ou ".right".

Par exemple :

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

Il ne sera traité que lorsque le bouton gauche sera enfoncé.