当前位置：首页 > VUE

vue中实现长按事件

2026-01-20 11:16:33VUE

监听原生事件实现长按

在Vue中可以通过@mousedown和@touchstart绑定原生事件，配合setTimeout触发长按逻辑。清除定时器使用@mouseup、@mouseleave和@touchend事件防止误触发。

<template>
  <button 
    @mousedown="startPress"
    @touchstart="startPress"
    @mouseup="cancelPress"
    @mouseleave="cancelPress"
    @touchend="cancelPress"
  >长按我</button>
</template>

<script>
export default {
  data() {
    return {
      pressTimer: null
    }
  },
  methods: {
    startPress(e) {
      this.pressTimer = setTimeout(() => {
        console.log('长按触发');
        // 执行长按逻辑
      }, 1000); // 1秒阈值
    },
    cancelPress() {
      clearTimeout(this.pressTimer);
    }
  }
}
</script>

使用自定义指令封装

通过Vue自定义指令可复用长按逻辑，全局注册后可在任意组件使用v-longpress。

// main.js
Vue.directive('longpress', {
  bind(el, binding) {
    let timer = null;
    const handler = binding.value;

    const start = (e) => {
      if (timer === null) {
        timer = setTimeout(() => {
          handler(e);
        }, 1000);
      }
    };

    const cancel = () => {
      if (timer !== null) {
        clearTimeout(timer);
        timer = null;
      }
    };

    el.addEventListener('mousedown', start);
    el.addEventListener('touchstart', start);
    el.addEventListener('mouseup', cancel);
    el.addEventListener('mouseleave', cancel);
    el.addEventListener('touchend', cancel);
  }
});

<template>
  <button v-longpress="handleLongPress">指令式长按</button>
</template>

<script>
export default {
  methods: {
    handleLongPress() {
      console.log('自定义指令触发长按');
    }
  }
}
</script>

第三方库解决方案

安装vue-long-click库简化实现：

npm install vue-long-click

import VueLongClick from 'vue-long-click'
Vue.use(VueLongClick, {
  delay: 700, // 默认延迟时间(ms)
  modifiers: {
    touch: true // 启用触摸支持
  }
});

<button v-longclick="handleLongClick">库实现长按</button>

移动端触摸事件优化

针对移动设备需增加touchcancel事件处理，并防止触摸时页面滚动：

methods: {
  startPress(e) {
    if (e.type === 'touchstart') {
      e.preventDefault(); // 阻止触摸滚动
    }
    this.pressTimer = setTimeout(() => {
      // 长按逻辑
    }, 800);
  }
}