fix: 修复 Chrome 上录音按钮被 pointerleave 过早中断的问题

- 在 pointerdown 时调用 setPointerCapture 锁定指针事件
- 在 pointerup 时释放 pointer capture
- 防止 async startRecording 期间 pointerleave 意外触发 stopRecording
- mic-wrapper 添加 touch-action: none 防止浏览器拦截触摸
This commit is contained in:
2026-03-02 05:43:23 +08:00
parent 6c1b8e95c8
commit aaea414d5a
2 changed files with 4 additions and 0 deletions

View File

@@ -359,10 +359,13 @@ function bindMicButton(): void {
micBtn.addEventListener("pointerdown", (e: PointerEvent) => { micBtn.addEventListener("pointerdown", (e: PointerEvent) => {
if (e.button !== 0) return; if (e.button !== 0) return;
e.preventDefault(); e.preventDefault();
// Capture pointer so pointerleave won't fire while held
micBtn.setPointerCapture(e.pointerId);
startRecording(); startRecording();
}); });
micBtn.addEventListener("pointerup", (e: PointerEvent) => { micBtn.addEventListener("pointerup", (e: PointerEvent) => {
e.preventDefault(); e.preventDefault();
micBtn.releasePointerCapture(e.pointerId);
stopRecording(); stopRecording();
}); });
micBtn.addEventListener("pointerleave", () => { micBtn.addEventListener("pointerleave", () => {

View File

@@ -198,6 +198,7 @@ header h1 {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
touch-action: none;
} }
#mic-btn { #mic-btn {