当前位置：首页 > VUE

vue实现长按事件

2026-01-15 02:31:53VUE

实现长按事件的基本思路

在Vue中实现长按事件，可以通过监听mousedown和touchstart事件启动计时器，并在mouseup、mouseleave或touchend事件中清除计时器。如果计时器未被清除且达到预设时间，则触发长按事件。

vue实现长按事件

使用原生事件绑定

通过Vue的@mousedown和@touchstart指令绑定事件，结合setTimeout实现长按逻辑。

vue实现长按事件

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

<script>
export default {
  data() {
    return {
      pressTimer: null,
      pressDuration: 1000 // 长按时间阈值（毫秒）
    };
  },
  methods: {
    startPress(e) {
      this.pressTimer = setTimeout(() => {
        this.handleLongPress(e);
      }, this.pressDuration);
    },
    endPress() {
      clearTimeout(this.pressTimer);
    },
    handleLongPress(e) {
      console.log('长按事件触发', e);
    }
  }
};
</script>

封装为自定义指令

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

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

<script>
export default {
  directives: {
    longpress: {
      bind(el, binding) {
        let pressTimer = null;
        const pressDuration = binding.arg || 1000;

        const start = (e) => {
          if (e.type === 'click' && e.button !== 0) return;
          pressTimer = setTimeout(() => {
            binding.value(e);
          }, pressDuration);
        };

        const cancel = () => {
          clearTimeout(pressTimer);
        };

        el.addEventListener('mousedown', start);
        el.addEventListener('touchstart', start);
        el.addEventListener('mouseup', cancel);
        el.addEventListener('mouseleave', cancel);
        el.addEventListener('touchend', cancel);
      }
    }
  },
  methods: {
    handleLongPress(e) {
      console.log('长按事件触发', e);
    }
  }
};
</script>