修复主题切换按钮

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

View File

@ -99,10 +99,14 @@ const {
// 确保当前没有活动的主题切换按钮事件 // 确保当前没有活动的主题切换按钮事件
cleanup(); cleanup();
// 添加延时确保DOM已准备好
setTimeout(() => {
// 获取所有主题切换按钮 // 获取所有主题切换按钮
const themeToggleButtons = document.querySelectorAll('#theme-toggle-button'); const themeToggleButtons = document.querySelectorAll('#theme-toggle-button');
if (!themeToggleButtons.length) { if (!themeToggleButtons.length) {
// 如果找不到按钮,再尝试一次延迟初始化
setTimeout(setupThemeToggle, 50);
return; 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) => { addListener(button, 'keydown', ((e: KeyboardEvent) => {
@ -207,11 +211,23 @@ const {
e.stopPropagation(); e.stopPropagation();
toggleTheme(); 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(); initializeTheme();
}, 0);
} }
// 注册清理函数 // 注册清理函数
@ -229,8 +245,14 @@ const {
// 初始化函数 // 初始化函数
function init(): void { function init(): void {
// 确保先清理之前的事件
cleanup();
// 设置延时确保DOM已完全更新
setTimeout(() => {
setupThemeToggle(); setupThemeToggle();
registerCleanup(); registerCleanup();
}, 10);
} }
// 在页面加载后初始化 // 在页面加载后初始化
@ -245,6 +267,19 @@ const {
document.addEventListener('astro:page-load', init); document.addEventListener('astro:page-load', init);
// Swup页面内容替换后重新初始化 // Swup页面内容替换后重新初始化
document.addEventListener('swup:contentReplaced', init); document.addEventListener('swup:contentReplaced', () => {
// 先清理现有事件
cleanup();
// 确保在微任务队列后执行让DOM完全更新
Promise.resolve().then(() => {
// 再次确保事件已清理
cleanup();
// 重新设置主题切换
setupThemeToggle();
// 注册新的清理函数
registerCleanup();
});
});
})(); })();
</script> </script>