Comment implémenter la surveillance d'événements tels que le clic, le double-clic et l'appui long dans Vue ?

Dans Vue, nous pouvons utiliser la directive v-on pour écouter les événements sur les éléments DOM. Cependant, dans le développement réel, nous devrons peut-être surveiller des événements plus complexes, tels qu'un simple clic, un double clic, un appui long, etc. À l'heure actuelle, l'utilisation de v-on semble quelque peu inadéquate.

Alors, comment mettre en place le suivi de ces événements dans Vue ? Cet article vous l’expliquera en détail.

1. Surveillance des événements de clic

Les événements de clic sont très courants dans les applications. Vue fournit l'abréviation v-on:click @click pour surveiller les événements de clic : #🎜 🎜#

<template>
  <button @click="handleClick">单击我</button>
</template>
<script>
export default {
  methods: {
    handleClick() {
      console.log('单击了按钮！');
    }
  }
}
</script>

#. 🎜🎜#Dans le code ci-dessus, nous avons ajouté un écouteur d'événement @click sur le bouton et l'avons lié à une méthode nommée handleClick.

En plus des méthodes ci-dessus, nous pouvons également utiliser les modificateurs fournis par Vue pour étendre l'événement click. Par exemple, pour empêcher les événements de bouillonner :

<template>
  <div @click.stop="handleClickParent">
    <button @click.stop="handleClickChild">单击我</button>
  </div>
</template>
<script>
export default {
  methods: {
    handleClickParent() {
      console.log('父元素单击了！');
    },
    handleClickChild() {
      console.log('子元素单击了！');
    }
  }
}
</script>

Dans le code ci-dessus, nous lions les événements de clic respectivement à l'élément parent et à l'élément enfant, et utilisons le modificateur @click.stop pour empêcher l'événement de bouillonner. . De cette façon, lorsque l'on clique sur un élément enfant, seul l'événement click de l'élément enfant sera déclenché, et l'événement click de l'élément parent ne sera pas déclenché.

2. Surveillance des événements de double-clic

Si nous devons surveiller les événements de double-clic, Vue ne fournit pas de solution directe. Mais nous pouvons utiliser les méthodes setTimeout et clearTimeout pour surveiller les événements de double-clic :

<template>
  <button @click="handleClick" @dblclick="handleDoubleClick">单击或双击我</button>
</template>
<script>
export default {
  data() {
    return {
      timer: null  // 定义一个计时器
    }
  },
  methods: {
    handleClick() {
      this.timer = setTimeout(() => {
        console.log('单击了按钮！');
        this.timer = null;
      }, 250);  // 250 毫秒内单击时触发单击事件
    },
    handleDoubleClick() {
      clearTimeout(this.timer);
      console.log('双击了按钮！');
      this.timer = null;
    }
  }
}
</script>

Dans le code ci-dessus, nous définissons une minuterie Lorsque l'utilisateur clique sur le bouton, nous démarrons la minuterie et attendons 250. milliseconde. Si l'utilisateur clique à nouveau sur le bouton dans ce délai, nous effaçons le minuteur et déclenchons l'événement de double-clic.

3. Surveillance des événements de pression longue

Semblable à l'événement de double-clic, Vue ne fournit pas de solution directe de surveillance des événements de pression longue. Mais vous pouvez également utiliser les méthodes setTimeout et clearTimeout pour surveiller les événements d'appui long :

<template>
  <button @mousedown="handleMouseDown" @mouseup="handleMouseUp" @touchstart="handleMouseDown" @touchend="handleMouseUp">长按我</button>
</template>
<script>
export default {
  data() {
    return {
      timer: null  // 定义一个计时器
    }
  },
  methods: {
    handleMouseDown() {
      this.timer = setTimeout(() => {
        this.timer = null;
        console.log('长按了按钮！');
      }, 1000);  // 1 秒钟之后触发长按事件
    },
    handleMouseUp() {
      clearTimeout(this.timer);
      this.timer = null;
    }
  }
}
</script>

Dans le code ci-dessus, nous avons lié les écouteurs d'événements mousedown et mouseup au bouton, du côté mobile, nous pouvons également. Écoutez les événements touchstart et touchend. Lorsque l'utilisateur appuie longuement sur le bouton, nous démarrons la minuterie et attendons 1 seconde. Si l'utilisateur relâche le bouton dans ce délai, nous effaçons la minuterie et déclenchons l'événement d'appui long ; sinon, nous déclenchons l'événement d'appui long ;

4. Résumé

Cet article présente principalement comment implémenter des méthodes de surveillance d'événements telles que le clic, le double-clic et l'appui long dans Vue. En utilisant la directive v-on et certaines méthodes JS, nous pouvons facilement écouter divers événements complexes pour offrir une expérience interactive plus riche pour l'application.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!