Cx330/DreamLife_HomePage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复聊天框弹出bug

Browse Source
This commit is contained in:
张梦南 2025-04-06 22:15:36 +08:00
parent df0830a2ad
commit a3dc204b21
3 changed files with 43 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/chat.css
View File

@ -13,6 +13,7 @@
.chat-box { .chat-box {
width: 90%; width: 90%;
min-height: 20px;
max-height: 50vh; max-height: 50vh;
overflow-y: auto; overflow-y: auto;
background: #f5f5f5; background: #f5f5f5;
@ -21,6 +22,7 @@
border-radius: 8px; border-radius: 8px;
position: relative; position: relative;
z-index: 10; z-index: 10;
display: none;
} }
.chat-box.show { .chat-box.show {

8
index.html
View File

@ -53,10 +53,12 @@
<div id="chatContainer" class="chat-box hide"></div> <div id="chatContainer" class="chat-box hide"></div>
<div class="input-row"> <div class="input-row">
<input type="text" id="userInput" placeholder="输入你的消息..." onfocus="toggleChat(true)"> <!-- 改用 onclick，顺带阻止冒泡 -->
<button onclick="sendMessage()">发送</button> <input type="text" id="userInput" placeholder="输入你的消息..."
onclick="openChat(event)" />
<button onclick="sendMessage()">发送</button>
</div> </div>
</div> </div>
<footer> <footer>
<p>&copy; 2025 DreamLife 版权所有</p> <p>&copy; 2025 DreamLife 版权所有</p>

60
javascape/chat.js
View File

@ -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) { function toggleChat(show) {
const chatBox = document.getElementById('chatContainer'); if (show) {
if (chatBox.classList.contains('show')) return;
if (show) { // 先显示动画前状态
// 如果已经显示就不重复处理 chatBox.style.display = 'block';
if (chatBox.classList.contains('show')) return; chatBox.classList.remove('hide');
chatBox.classList.add('show');
chatBox.style.display = 'block'; // 确保先显示再动画 // 延迟到下一轮事件循环再加 document 监听，避免捕获当前点击
chatBox.classList.remove('hide'); setTimeout(() => {
chatBox.classList.add('show'); document.addEventListener('click', outsideClickListener);
}, 0);
document.addEventListener('click', outsideClickListener); // 聊天框内部点击也不要冒泡
} else { chatBox.addEventListener('click', e => e.stopPropagation());
if (!chatBox.classList.contains('show')) return; } else {
if (!chatBox.classList.contains('show')) return;
chatBox.classList.remove('show'); chatBox.classList.remove('show');
chatBox.classList.add('hide'); chatBox.classList.add('hide');
chatBox.addEventListener('animationend', function handler() { // 动画结束后真正隐藏
chatBox.style.display = 'none'; chatBox.addEventListener('animationend', function handler() {
chatBox.removeEventListener('animationend', handler); chatBox.style.display = 'none';
}); chatBox.removeEventListener('animationend', handler);
});
document.removeEventListener('click', outsideClickListener); document.removeEventListener('click', outsideClickListener);
} }
} }
function outsideClickListener(event) { 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);
}
} }