发送消息时页面自动刷新，e.preventDefault()失效问题求助

问题核心 #

点击chat-submit按钮页面自动刷新，根源是submitForm函数里的e.preventDefault()只有当传入有效事件对象时才会执行，但从onFormSubmit调用submitForm时传了false作为第一个参数，导致阻止默认行为的代码没触发；但如果不传false又没法传递表单的数值。

解决方案 #

调整submitForm的参数逻辑，区分表单提交触发和代码主动调用两种场景，同时给聊天表单绑定正确的提交事件：

1. 修改submitForm函数定义

把参数顺序调换，给事件对象e设置默认值null，这样代码主动调用时不需要传事件占位符：

const submitForm = async (val, e = null) => {
    // 只有当存在有效事件对象时，才阻止默认行为
    if (e) { 
        e.preventDefault(); 
    }

    if (!conversationId) {
        console.error('conversationId is not set.');
        return;
    }

    document.querySelector("#chat-submit").disabled = true;

    let x = document.forms["form-feedback-data"]["message"];
    // 优先使用传入的val，否则用输入框的值
    let message = val || x.value;

    console.log('Submitting message:', message);

    // 以下原有逻辑保持不变
    await sendToApi(conversationId, "user", message);

    if (message !== "") {
        let aud = new Audio("https://backend.aiduals.com/assets/userMusic.mp3");
        aud.play();

        let userDiv = `
            <div class="aidual_chatbot_wrap">
                <div style="display: flex; align-items: center; justify-content: end;">
                    <div>
                        <span class="aidual_chatbot_date2">
                            <strong>${guestName.length > 0 ? guestName : "Guest"}</strong> ${generateDate()}
                        </span>
                    </div>
                    <div class="aidual_chatbot_wimg2">
                        <img src="${avtarUrl.length > 0 ? avtarUrl : "https://backend.aiduals.com/assets/user.png"}" alt="" />
                    </div>
                </div>
                <div class="aidual_chatbot_wchat2">
                    ${message}
                </div>
            </div>`;

        let blinkMsg = `
            <div style="display: flex; padding-left: 0px;" id="typing-feed-active">
                <span style="color: #555; font-size: 13px; font-weight: 500; display: flex; margin-top: 6px;">
                    <span style="margin-right: 5px">Do Tasks AI</span> is <span id="blinkChangeMsg" style="margin-left: 5px">typing</span>
                </span>
                <div class="typing">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>`;

        typingInterval = setInterval(() => {
            typingIndex++;
            if (typingIndex === 6) {
                typingIndex = 0;
            }
            let typingMsgData = document.getElementById("blinkChangeMsg");
            typingMsgData.innerText = arrTyping[typingIndex];
        }, 5000);

        const chatWindow = document.getElementById("mainChatWindowBlock");
        chatWindow.insertAdjacentHTML("beforeend", userDiv);
        chatWindow.insertAdjacentHTML("beforeend", blinkMsg);
        if (chatWindow.clientHeight < chatWindow.scrollHeight) {
            chatWindow.scrollBy(0, chatWindow.scrollHeight);
        }

        onCreateMessage(message, typingInterval);

        if (!val) {
            x.value = "";
        }
    }
}

2. 给聊天表单绑定submit事件

添加事件监听，确保点击提交按钮时传入事件对象，阻止页面刷新：

// 页面加载完成后绑定事件
document.addEventListener('DOMContentLoaded', () => {
    const chatForm = document.getElementById('form-feedback-data');
    chatForm.addEventListener('submit', async (e) => {
        const inputField = chatForm.querySelector('[name="message"]');
        await submitForm(inputField.value, e);
    });
});

3. 修改onFormSubmit里的调用

不需要再传false，直接传递表单数值即可：

// 原代码：submitForm(false, value);
// 修改为：
submitForm(value);

为什么这样改？ #

• 调整参数顺序后，val成为必填参数，e作为可选参数，既满足代码主动调用时传递数值的需求，又能在表单提交时传入事件对象阻止刷新。
• 给聊天表单绑定独立的submit事件，确保每次点击提交按钮都能触发preventDefault()，彻底解决页面刷新问题。

内容的提问来源于stack exchange，提问作者Nikhil Singh