fix: 点击背景图/空白区域取消层叠图选中状态

js/script.js

@@ -98,26 +98,43 @@
 
         // 点击容器空白处取消选中
         function handleContainerClick(e) {
-            // 点击容器、背景图层或背景图片，取消输入框选中
+            const isBackground = e.target === imageContainer ||
-            if (e.target === imageContainer ||
                                  e.target === bgLayer ||
                                  e.target === bgImage ||
                                  e.target.closest('.preview-bg-layer') ||
-                e.target === document.getElementById('emptyTip')) {
+                                 e.target === document.getElementById('emptyTip');
+            const isOverlayImage = e.target.closest('.overlay-image');
+            const isTextInput = e.target.closest('.text-input');
+
+            // 点击背景/空白区域
+            if (isBackground && !isOverlayImage) {
                 // 如果正在编辑，先结束编辑
                 if (editingInput) {
                     endEdit(editingInput);
                 }
-                // 移除选中状态
+                // 移除输入框选中状态
                 if (selectedInput) {
                     selectedInput.classList.remove('selected');
                     selectedInput = null;
                 }
+                // 取消层叠图选中状态
+                if (selectedOverlay) {
+                    selectedOverlay.classList.remove('selected');
+                    selectedOverlay = null;
+                }
                 // 隐藏辅助线
                 hideGuides();
                 // 隐藏文本编辑器工具栏
                 textEditorToolbar.classList.remove('active');
             }
+
+            // 点击空白区域（不是层叠图和输入框）
+            if (!isOverlayImage && !isTextInput && !isBackground) {
+                if (selectedOverlay) {
+                    selectedOverlay.classList.remove('selected');
+                    selectedOverlay = null;
+                }
+            }
         }
 
         imageContainer.addEventListener('click', handleContainerClick);
@@ -439,19 +456,6 @@
         overlayEl.classList.add('selected');
     }
 
-    // 点击背景/空白处取消选中层叠图
-    imageContainer.addEventListener('click', (e) => {
-        const isOverlayImage = e.target.closest('.overlay-image');
-        const isTextInput = e.target.closest('.text-input');
-
-        if (!isOverlayImage && !isTextInput) {
-            if (selectedOverlay) {
-                selectedOverlay.classList.remove('selected');
-                selectedOverlay = null;
-            }
-        }
-    });
-
     // 计算图片滑动边界
     function calculateImageBounds() {
         if (!currentImage) return;