修复主题切换按钮
This commit is contained in:
parent
4bb37c4a4d
commit
fdbc983d72
@ -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<{
|
||||||
|
@ -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>
|
Loading…
Reference in New Issue
Block a user