Vue.js 3长按点击事件处理方案求助（需无高危漏洞）

不用找那些老旧第三方包了，自己写个轻量的自定义指令就能实现你要的@long-click.on和@long-click.off用法，完全可控，还没安全隐患：

1. 编写自定义指令 #

在项目里新建一个指令文件，比如src/directives/longClick.js，代码如下：

const longClick = {
  mounted(el) {
    let timer = null;
    // 长按触发的阈值，默认500ms，可自行修改
    const LONG_PRESS_THRESHOLD = 500;

    // 按下/触摸开始时启动计时器
    const startLongPress = () => {
      timer = setTimeout(() => {
        // 触发long-click.on自定义事件
        el.dispatchEvent(new CustomEvent('long-click.on'));
      }, LONG_PRESS_THRESHOLD);
    };

    // 松开/移出时终止计时并触发结束事件
    const endLongPress = () => {
      clearTimeout(timer);
      // 触发long-click.off自定义事件
      el.dispatchEvent(new CustomEvent('long-click.off'));
    };

    // 绑定PC端事件
    el.addEventListener('mousedown', startLongPress);
    el.addEventListener('mouseup', endLongPress);
    el.addEventListener('mouseleave', endLongPress);

    // 绑定移动端事件
    el.addEventListener('touchstart', startLongPress);
    el.addEventListener('touchend', endLongPress);
    el.addEventListener('touchcancel', endLongPress);
  }
};

export default longClick;

2. 全局注册指令 #

在src/main.js里注册这个指令，让所有组件都能用：

import { createApp } from 'vue';
import App from './App.vue';
import longClick from './directives/longClick';

const app = createApp(App);
app.directive('long-click', longClick);
app.mount('#app');

3. 组件内使用 #

完全按照你想要的方式调用：

<template>
  <button v-long-click @long-click.on="something" @long-click.off="somethingElse">
    长按我试试
  </button>
</template>

<script setup>
const something = () => {
  console.log('长按触发啦！');
  // 这里写你的长按逻辑，比如弹出菜单、发起请求等
};

const somethingElse = () => {
  console.log('长按结束啦！');
  // 这里写长按终止后的逻辑，比如隐藏菜单等
};
</script>

可选优化 #

• 如果需要不同组件用不同的长按阈值，可以把阈值做成指令参数，比如v-long-click:800，然后在指令里通过binding.arg获取这个数值替换LONG_PRESS_THRESHOLD
• 可以添加左键判断，避免右键误触发：在mousedown事件里判断event.button === 0再启动计时器
• 支持防抖，防止短时间内重复触发事件

内容的提问来源于stack exchange，提问作者Devck - DC