Vue でクリック、ダブルクリック、長押しなどのイベント監視を実装するにはどうすればよいですか?

Vue では、v-on ディレクティブを使用して DOM 要素のイベントをリッスンできます。ただし、実際の開発では、シングルクリック、ダブルクリック、長押しなど、より複雑なイベントを監視する必要がある場合があります。現時点では、v-on を使用するのは少し不十分だと思われます。

では、Vue でこれらのイベントの監視を実装するにはどうすればよいでしょうか?この記事ではそれについて詳しく説明します。

1. クリック イベントの監視

クリック イベントはアプリケーションで非常に一般的です。Vue ではクリック イベントを監視するために v-on:click 略語 @click が提供されています:

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

上記ではコードでは、@click イベント リスナーをボタンに追加し、それを handleClick という名前のメソッドにバインドしました。

上記の方法に加えて、Vue が提供する修飾子を使用してクリック イベントを拡張することもできます。たとえば、イベントのバブリングを防ぐには:

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

上記のコードでは、クリック イベントを親要素と子要素にそれぞれバインドし、@click.stop 修飾子を使用してイベントのバブリングを防ぎます。このように、子要素をクリックすると、子要素のクリック イベントのみがトリガーされ、親要素のクリック イベントはトリガーされません。

2. ダブルクリック イベントの監視

ダブルクリック イベントを監視する必要がある場合、Vue は直接的な解決策を提供しません。ただし、setTimeout メソッドと clearTimeout メソッドを使用して、ダブルクリック イベントを監視できます:

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

上記のコードでは、タイマーを定義しています。ユーザーがボタンをクリックすると、タイマーが開始され、250 ミリ秒待機します。この時間内にユーザーがもう一度ボタンをクリックすると、タイマーがクリアされ、ダブルクリック イベントが発生します。

3. 長押しイベントの監視

ダブルクリック イベントと同様に、Vue は直接の長押しイベント監視ソリューションを提供しません。ただし、setTimeout メソッドと clearTimeout メソッドを使用して長押しイベントを監視することもできます:

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

上記のコードでは、mousedown および Mouseup イベント リスナーをボタンにバインドします。モバイル側では、タッチスタートをリッスンすることもできます。そしてタッチエンドイベント。ユーザーがボタンを長押しすると、タイマーが開始され、1 秒間待機します。この時間内にユーザーがボタンを放すと、タイマーがクリアされて長押しイベントがトリガーされ、それ以外の場合は長押しイベントがトリガーされます。

4. まとめ

この記事では主に、Vue でのクリック、ダブルクリック、長押しなどのイベント監視メソッドの実装方法を紹介します。 v-on ディレクティブといくつかの JS メソッドを使用すると、さまざまな複雑なイベントを簡単にリッスンして、アプリケーションにより豊かなインタラクティブなエクスペリエンスを提供できます。

以上がVue でクリック、ダブルクリック、長押しなどのイベント監視を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。