修复主题切换按钮

This commit is contained in:
lsy 2025-04-20 16:03:03 +08:00
parent 4bb37c4a4d
commit fdbc983d72
2 changed files with 138 additions and 105 deletions

View File

@ -288,8 +288,6 @@ const normalizedPath =
<script>
// Header组件逻辑 - 使用"进入→绑定→退出完全清理"模式
(function() {
// 生成唯一ID用于日志跟踪
const headerId = 'header-' + (new Date().getTime());
// 存储所有事件监听器,便于统一清理
const listeners: Array<{

View File

@ -99,10 +99,14 @@ const {
// 确保当前没有活动的主题切换按钮事件
cleanup();
// 添加延时确保DOM已准备好
setTimeout(() => {
// 获取所有主题切换按钮
const themeToggleButtons = document.querySelectorAll('#theme-toggle-button');
if (!themeToggleButtons.length) {
// 如果找不到按钮,再尝试一次延迟初始化
setTimeout(setupThemeToggle, 50);
return;
}
@ -187,7 +191,7 @@ const {
};
// 点击事件 - 使用捕获模式
addListener(button, 'click', clickHandler, { capture: true });
addListener(button, 'click', clickHandler, { capture: true, passive: false });
// 键盘事件
addListener(button, 'keydown', ((e: KeyboardEvent) => {
@ -207,11 +211,23 @@ const {
e.stopPropagation();
toggleTheme();
}
});
}, { capture: true, passive: false });
}
// 添加事件代理确保即使在DOM重建后点击事件也能正常工作
addListener(document.body, 'click', (e: Event) => {
const target = e.target as HTMLElement;
// 检查是否点击了主题切换按钮
if (target.id === 'theme-toggle-button' || target.closest('#theme-toggle-button')) {
e.preventDefault();
e.stopPropagation();
toggleTheme();
}
}, { capture: true, passive: false });
// 初始化主题
initializeTheme();
}, 0);
}
// 注册清理函数
@ -229,8 +245,14 @@ const {
// 初始化函数
function init(): void {
// 确保先清理之前的事件
cleanup();
// 设置延时确保DOM已完全更新
setTimeout(() => {
setupThemeToggle();
registerCleanup();
}, 10);
}
// 在页面加载后初始化
@ -245,6 +267,19 @@ const {
document.addEventListener('astro:page-load', init);
// Swup页面内容替换后重新初始化
document.addEventListener('swup:contentReplaced', init);
document.addEventListener('swup:contentReplaced', () => {
// 先清理现有事件
cleanup();
// 确保在微任务队列后执行让DOM完全更新
Promise.resolve().then(() => {
// 再次确保事件已清理
cleanup();
// 重新设置主题切换
setupThemeToggle();
// 注册新的清理函数
registerCleanup();
});
});
})();
</script>