feat(图层面板): 添加点击空白区域关闭面板功能

添加点击面板外部区域关闭图层面板的功能,同时支持桌面端和移动端。桌面端使用 click 事件,移动端使用 touchend 事件,并确保点击面板内部或图层按钮时不触发关闭。
This commit is contained in:
Zhukj
2026-04-25 09:35:32 +08:00
parent a7d0ad8e51
commit b380e65161

View File

@@ -2421,6 +2421,25 @@
layersClose.addEventListener('click', closeLayersPanel);
layersClose.addEventListener('touchend', (e) => { e.preventDefault(); closeLayersPanel(); });
// 点击空白区域关闭图层面板
const handleClickOutside = (e) => {
// 如果点击的是图层面板内部,不关闭
if (layersPanel.contains(e.target) || layersBtn.contains(e.target)) {
return;
}
// 关闭图层面板
layersPanel.classList.remove('active');
};
// 桌面端使用 click 事件
document.addEventListener('click', handleClickOutside);
// 移动端使用 touchend 事件
document.addEventListener('touchend', (e) => {
if (layersPanel.classList.contains('active')) {
handleClickOutside(e);
}
});
// 图层操作按钮 - 只保留显示/隐藏(同时支持桌面和移动端)
const layerToggleVisibleBtn = document.getElementById('layerToggleVisible');
if (layerToggleVisibleBtn) {