pc端长按div，处理事件

1. 安装vueuse/corepnpm install vueuse/core2.页面div classrecord-btn refrecordBtnRef contextmenu.prevent selectstart.prevent touchendhandleTouchEnd touchcancelhandleTouchCancel img :srcrecordIcon / p点击开始录音/p /div import { onLongPress } from vueuse/core; const recordBtnRef ref(null); const counter ref(0); const isLongPressed ref(false); // 标记是否正在长按 const status ref(就绪); const timerId ref(null); let pressStartTime 0; // 定义长按开始、结束、取消的处理函数 const handleStart () { console.log([onStart] 长按开始); status.value 长按中...; pressStartTime Date.now(); }; const handleEnd (cancelled) { const pressDuration ((Date.now() - pressStartTime) / 1000).toFixed(2); console.log( [onEnd] 长按结束, 持续: ${pressDuration}s, 是否取消: ${cancelled} ); status.value cancelled ? 长按取消 (${pressDuration}s) : 长按完成 (${pressDuration}s); // 恢复按钮颜色 // 如果没有被取消执行长按成功逻辑 if (!cancelled) { console.log(执行长按成功逻辑); setTimeout(() { status.value 就绪; }, 2000); } else { setTimeout(() { status.value 就绪; }, 2000); } }; // 手动处理 touchend 和 touchcancel const handleTouchEnd (event) { console.log([Manual] TouchEnd 事件触发); // 你要处理的事件 // 注意手动调用 touchend 不应直接触发逻辑因为它会被 onLongPress 内部处理 // 但我们可以通过检查状态来确认是否被正确处理 }; const handleTouchCancel (event) { console.log([Manual] TouchCancel 事件触发); // 同样这个事件也会被 onLongPress 内部处理 // 但有时手动处理有助于调试或确保逻辑完整性 }; onLongPress( recordBtnRef, () { console.log(高级 Ref 元素被长按了); isLongPressed.value true; startAudioRecorder(); }, { delay: 1000, // 1秒后触发 // 可以添加 onStart, onEnd 等回调 onStart: handleStart, onEnd: handleEnd, } );3.样式处理.record-btn { text-align: center; /* 防止用户选择文本或图片内容这是关键 */ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; /* 防止图片被拖拽 */ -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; user-drag: none; /* 防止高亮 */ -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; /* iOS Safari */ touch-action: manipulation; /* 优化触摸交互 */3.浏览器访问需要麦克风的权限例如edge浏览器在浏览框输入edge://flags/#unsafely-treat-insecure-origin-as-secure打开页面选择已启用并加入你需要的地址即可