refactor: Optimize event handling for folder tags using delegation

This commit is contained in:
Will Miao
2025-04-12 16:15:29 +08:00
parent 5261ab249a
commit ff7a36394a

View File

@@ -66,10 +66,16 @@ export class PageControls {
}); });
} }
// Folder tags handler // Use event delegation for folder tags - this is the key fix
document.querySelectorAll('.folder-tags .tag').forEach(tag => { const folderTagsContainer = document.querySelector('.folder-tags-container');
tag.addEventListener('click', (e) => this.handleFolderClick(e.currentTarget)); if (folderTagsContainer) {
}); folderTagsContainer.addEventListener('click', (e) => {
const tag = e.target.closest('.tag');
if (tag) {
this.handleFolderClick(tag);
}
});
}
// Refresh button handler // Refresh button handler
const refreshBtn = document.querySelector('[data-action="refresh"]'); const refreshBtn = document.querySelector('[data-action="refresh"]');
@@ -186,14 +192,11 @@ export class PageControls {
// Update the container // Update the container
folderTagsContainer.innerHTML = tagsHTML; folderTagsContainer.innerHTML = tagsHTML;
// Reattach click handlers // Scroll active folder into view (no need to reattach click handlers)
const tags = folderTagsContainer.querySelectorAll('.tag'); const activeTag = folderTagsContainer.querySelector(`.tag[data-folder="${currentFolder}"]`);
tags.forEach(tag => { if (activeTag) {
tag.addEventListener('click', (e) => this.handleFolderClick(e.currentTarget)); activeTag.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
if (tag.dataset.folder === currentFolder) { }
tag.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
});
} }
/** /**