修复聊天框弹出bug

javascape/chat.js

@@ -6,38 +6,50 @@ document.getElementById('userInput').addEventListener('keydown', function(event)
 });
 
 // 控制聊天框显示和隐藏
+const chatBox = document.getElementById('chatContainer');
+const inputBox = document.getElementById('userInput');
+
+// 点击输入框时打开聊天框
+function openChat(e) {
+  e.stopPropagation();        // 阻止这次点击冒泡到 document
+  toggleChat(true);
+}
+
 function toggleChat(show) {
-    const chatBox = document.getElementById('chatContainer');
+  if (show) {
+    if (chatBox.classList.contains('show')) return;
 
-    if (show) {
-        // 如果已经显示就不重复处理
-        if (chatBox.classList.contains('show')) return;
+    // 先显示动画前状态
+    chatBox.style.display = 'block';
+    chatBox.classList.remove('hide');
+    chatBox.classList.add('show');
 
-        chatBox.style.display = 'block'; // 确保先显示再动画
-        chatBox.classList.remove('hide');
-        chatBox.classList.add('show');
+    // 延迟到下一轮事件循环再加 document 监听，避免捕获当前点击
+    setTimeout(() => {
+      document.addEventListener('click', outsideClickListener);
+    }, 0);
 
-        document.addEventListener('click', outsideClickListener);
-    } else {
-        if (!chatBox.classList.contains('show')) return;
+    // 聊天框内部点击也不要冒泡
+    chatBox.addEventListener('click', e => e.stopPropagation());
+  } else {
+    if (!chatBox.classList.contains('show')) return;
 
-        chatBox.classList.remove('show');
-        chatBox.classList.add('hide');
+    chatBox.classList.remove('show');
+    chatBox.classList.add('hide');
 
-        chatBox.addEventListener('animationend', function handler() {
-            chatBox.style.display = 'none';
-            chatBox.removeEventListener('animationend', handler);
-        });
+    // 动画结束后真正隐藏
+    chatBox.addEventListener('animationend', function handler() {
+      chatBox.style.display = 'none';
+      chatBox.removeEventListener('animationend', handler);
+    });
 
-        document.removeEventListener('click', outsideClickListener);
-    }
+    document.removeEventListener('click', outsideClickListener);
+  }
 }
 
 function outsideClickListener(event) {
-    const chatBox = document.getElementById('chatContainer');
-    const inputBox = document.getElementById('userInput');
-
-    if (!chatBox.contains(event.target) && !inputBox.contains(event.target)) {
-        toggleChat(false);
-    }
+  // 点击目标既不在聊天框也不在输入框里，就收起
+  if (!chatBox.contains(event.target) && !inputBox.contains(event.target)) {
+    toggleChat(false);
+  }
 }