fix(core): 修复事件监听器泄漏

- App.vue: offline 监听器添加 onUnmounted 清理,移除冗余 console.log
- MusicHook.ts: document.onkeyup 直接赋值改为 addEventListener + 防重复
- MusicHook.ts: audio-ready 监听器提取为命名函数,先移除再注册防堆叠
This commit is contained in:
alger
2026-03-29 14:21:43 +08:00
parent 34713430e1
commit 1e30a11881
2 changed files with 32 additions and 30 deletions

View File

@@ -131,14 +131,16 @@ onMounted(async () => {
// 检查网络状态,离线时自动跳转到本地音乐页面
if (!navigator.onLine) {
console.log('检测到无网络连接,跳转到本地音乐页面');
router.push('/local-music');
}
// 监听网络状态变化,断网时跳转到本地音乐页面
window.addEventListener('offline', () => {
console.log('网络连接断开,跳转到本地音乐页面');
const handleOffline = () => {
router.push('/local-music');
};
window.addEventListener('offline', handleOffline);
onUnmounted(() => {
window.removeEventListener('offline', handleOffline);
});
// 初始化 MusicHook注入 playerStore

View File

@@ -64,25 +64,27 @@ export const musicDB = await useIndexedDB(
3
);
// 键盘事件处理器,在初始化后设置
const setupKeyboardListeners = () => {
document.onkeyup = (e) => {
// 检查事件目标是否是输入框元素
const target = e.target as HTMLElement;
if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
return;
}
// 键盘事件处理器(提取为命名函数,防止重复注册)
const handleKeyUp = (e: KeyboardEvent) => {
const target = e.target as HTMLElement;
if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
return;
}
const store = getPlayerStore();
switch (e.code) {
case 'Space':
if (store.playMusic?.id) {
void store.setPlay({ ...store.playMusic });
}
break;
default:
}
};
const store = getPlayerStore();
switch (e.code) {
case 'Space':
if (store.playMusic?.id) {
void store.setPlay({ ...store.playMusic });
}
break;
default:
}
};
const setupKeyboardListeners = () => {
document.removeEventListener('keyup', handleKeyUp);
document.addEventListener('keyup', handleKeyUp);
};
let audioListenersInitialized = false;
@@ -1025,18 +1027,14 @@ export const initAudioListeners = async () => {
}
};
// 添加音频就绪事件监听器
window.addEventListener('audio-ready', ((event: CustomEvent) => {
// 音频就绪事件处理器(提取为命名函数,防止重复注册)
const handleAudioReady = ((event: CustomEvent) => {
try {
const { sound: newSound } = event.detail;
if (newSound) {
// 更新本地 sound 引用
sound.value = audioService.getCurrentSound();
// 设置音频监听器
setupAudioListeners();
// 获取当前播放位置并更新显示
const currentSound = audioService.getCurrentSound();
if (currentSound) {
const currentPosition = currentSound.currentTime;
@@ -1044,10 +1042,12 @@ window.addEventListener('audio-ready', ((event: CustomEvent) => {
nowTime.value = currentPosition;
}
}
console.log('音频就绪,已设置监听器并更新进度显示');
}
} catch (error) {
console.error('处理音频就绪事件出错:', error);
}
}) as EventListener);
}) as EventListener;
// 先移除再注册,防止重复
window.removeEventListener('audio-ready', handleAudioReady);
window.addEventListener('audio-ready', handleAudioReady);