当前位置：首页 > VUE

vue实现长按事

2026-03-10 08:21:51VUE

Vue 实现长按事件的方法

在 Vue 中实现长按事件可以通过原生 JavaScript 的事件监听或自定义指令完成。以下是几种常见的实现方式：

使用原生事件监听

通过 mousedown 和 mouseup 或 touchstart 和 touchend 事件组合实现长按逻辑。

<template>
  <button @mousedown="startPress" @mouseup="endPress">长按我</button>
</template>

<script>
export default {
  methods: {
    startPress() {
      this.timer = setTimeout(() => {
        console.log('长按事件触发');
      }, 1000); // 1秒后触发长按
    },
    endPress() {
      clearTimeout(this.timer);
    }
  }
};
</script>

使用自定义指令

封装长按逻辑为 Vue 指令，方便复用。

<template>
  <button v-longpress="handleLongPress">长按我</button>
</template>

<script>
export default {
  directives: {
    longpress: {
      bind(el, binding) {
        let timer;
        el.addEventListener('mousedown', () => {
          timer = setTimeout(() => {
            binding.value();
          }, 1000);
        });
        el.addEventListener('mouseup', () => {
          clearTimeout(timer);
        });
      }
    }
  },
  methods: {
    handleLongPress() {
      console.log('长按事件触发');
    }
  }
};
</script>

处理移动端触摸事件

针对移动端，使用 touchstart 和 touchend 事件。

vue实现长按事

<template>
  <button @touchstart="startTouch" @touchend="endTouch">长按我</button>
</template>

<script>
export default {
  methods: {
    startTouch() {
      this.timer = setTimeout(() => {
        console.log('长按事件触发');
      }, 1000);
    },
    endTouch() {
      clearTimeout(this.timer);
    }
  }
};
</script>