vue 3 中通过自定义指令实现跨端长按事件，统一处理计时、防误触、坐标偏移判断与资源清理，并派发 longpress/longpressend/longpresscancel 语义化事件供组件监听。
Vue 3 中实现移动端长按自定义事件，核心是用自定义指令封装一套跨端（touch/mouse）的定时触发逻辑，并通过 dispatchEvent 主动抛出语义化事件（如 longpress），让业务层只需监听即可，无需重复处理计时、防误触、清理等细节。
用自定义指令统一管理长按生命周期
在 directives/longPress.ts 中定义一个 ObjectDirective，利用 mounted 钩子绑定事件，unmounted 钩子自动清理资源：
- 同时监听
touchstart和mousedown启动计时器 - 监听
touchend、touchcancel、mouseup、mouseleave等事件取消定时器 - 使用
setTimeout触发阈值（默认 500ms），超时后调用el.dispatchEvent(new CustomEvent('longpress', { detail })) - 为防止内存泄漏，把定时器 ID 存在元素属性上（如
el._longPressTimer），卸载时清除
支持防误触与移动距离判断
用户按下后若发生明显位移（比如滑动选择），应取消长按。可在 start 阶段记录初始坐标，在 touchmove/mousemove 中计算偏移量：
- 添加
moveThreshold配置项（默认 5px） - 在
touchmove或mousemove回调中，用Math.hypot(x - startX, y - startY)计算欧氏距离 - 超过阈值立即
clearTimeout并标记为已取消 - 注意：移动端需给
touchstart添加{ passive: false }才能调用e.preventDefault()
暴露语义化事件供组件监听
不推荐在指令里直接执行业务函数，而是统一派发标准事件，保持解耦：
- 触发时派发
longpress，携带duration、clientX、clientY等信息 - 松开时派发
longpressend，便于做收尾动画或状态重置 - 被中断（如移出区域、页面切走）时派发
longpresscancel - 组件内可直接写：
@longpress="onLongPress"，和原生事件写法一致
注册并全局使用
在 main.ts 中注册指令，确保所有组件都能使用：
- 导入指令：
import longPress from './directives/longPress' - 调用
app.directive('longpress', longPress) - 模板中使用：
<div v-longpress></div>，或带配置：v-longpress="{ duration: 800 }" - 支持 TypeScript 类型推导：为
binding.value提供LongPressOptions接口，含duration、moveThreshold、preventDefault等字段
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
