feat(图层面板): 添加点击空白区域关闭面板功能
添加点击面板外部区域关闭图层面板的功能,同时支持桌面端和移动端。桌面端使用 click 事件,移动端使用 touchend 事件,并确保点击面板内部或图层按钮时不触发关闭。
This commit is contained in:
19
js/script.js
19
js/script.js
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user