当前位置：首页 > VUE

vue实现长按事

2026-01-18 02:39:28VUE

Vue 实现长按事件的方法

使用原生事件监听

通过 @mousedown 和 @mouseup 结合 setTimeout 实现长按逻辑。在 mousedown 时启动计时器，mouseup 时清除计时器。

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

使用自定义指令

封装一个 v-longpress 指令，便于复用。指令内部逻辑与原生事件类似，但通过指令绑定更简洁。

<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。同时注意防止触摸时的默认行为（如页面滚动）。

<template>
  <div @touchstart="startTouch" @touchend="endTouch">长按触摸</div>
</template>

<script>
export default {
  methods: {
    startTouch(e) {
      e.preventDefault(); // 阻止默认行为
      this.timer = setTimeout(() => {
        console.log('触摸长按触发');
      }, 1000);
    },
    endTouch() {
      clearTimeout(this.timer);
    }
  }
};
</script>

第三方库

使用如 vue-touch 或 hammer.js 等库简化实现。以 vue-touch 为例：

import VueTouch from 'vue-touch';
Vue.use(VueTouch, { name: 'v-touch' });

<template>
  <v-touch @press="onPress">库实现长按</v-touch>
</template>

<script>
export default {
  methods: {
    onPress() {
      console.log('vue-touch 长按事件');
    }
  }
};
</script>