模态框关闭次数越多alert弹窗次数递增的问题求助

架构老林

2026-8-18

问题：关闭Modal次数越多，Alert弹窗触发次数越多

关闭modal窗口的次数越多，点击保存按钮时alert弹窗出现的次数就越多。原本猜测是if else条件逻辑的问题，尝试嵌套if语句后仍未解决。

问题演示

相关代码

JS代码

projectEditTitleBtn.forEach((btn) => {
    btn.addEventListener("click", (e) => {
        let data = e.target.dataset.modalOpen;
        modalTask.forEach((modal) => {
            if (modal.dataset.modal == data) {
                openModalEditProject(modal);
            }
        });

        modalAddBtn.forEach((modalAdd) => {
            modalAdd.addEventListener("click", function (e) {
                e.preventDefault();
                if (projectNewTitle.value.length === 0 || "") {
                    alert("fields cannot be empty!");
                }
                if (projectNewTitle.value.length < 25 && projectNewTitle.value.length != 0) {
                    projectTitle.textContent = `${projectNewTitle.value}`;
                    sidebarProjectTitle.textContent = `${projectNewTitle.value}`;
                    const parentModal = this.closest(".modal");
                    parentModal.classList.remove("modal_state_active");
                    overlay.classList.remove("modal-bg_state_active");
                    modalBody.classList.remove("modal-body_state_active");
                    overlayProject.classList.remove("modal-bg_state_active");
                    projectModalBody.classList.remove("modal-body_state_active");
                    editProjectModalBody.classList.remove("modal-body_state_active");
                    editOverlayProject.classList.remove("modal-bg_state_active");
                }
                if (projectNewTitle.value.length > 25) {
                    alert("The name of the project can not be longer than 25 characters!");
                }
            });

            modalAdd.addEventListener("keypress", function (event) {
                if (projectNewTitle.value.length === 0 || "") {
                    alert("fields cannot be empty!");
                }

                if (event.key === "Enter" && projectNewTitle.value.length < 25 && projectNewTitle.value.length != 0) {
                    projectTitle.textContent = `${projectNewTitle.value}`;
                    sidebarProjectTitle.textContent = `${projectNewTitle.value}`;
                    const parentModal = this.closest(".modal");
                    parentModal.classList.remove("modal_state_active");
                    overlay.classList.remove("modal-bg_state_active");
                    modalBody.classList.remove("modal-body_state_active");
                    overlayProject.classList.remove("modal-bg_state_active");
                    projectModalBody.classList.remove("modal-body_state_active");
                    editProjectModalBody.classList.remove("modal-body_state_active");
                    editOverlayProject.classList.remove("modal-bg_state_active");
                }
                if (projectNewTitle.value.length > 25) {
                    alert("The name of the project can not be longer than 25 characters!");
                }
            });
        });
    });

    closeButtons.forEach(function (item) {
        item.addEventListener("click", function (e) {
            const parentModal = this.closest(".modal");
            parentModal.classList.remove("modal_state_active");
            overlay.classList.remove("modal-bg_state_active");
            modalBody.classList.remove("modal-body_state_active");
            overlayProject.classList.remove("modal-bg_state_active");
            projectModalBody.classList.remove("modal-body_state_active");
            editProjectModalBody.classList.remove("modal-body_state_active");
            editOverlayProject.classList.remove("modal-bg_state_active");
        });
    });

    cancelButtons.forEach(function (item) {
        item.addEventListener("click", function (e) {
            e.preventDefault();
            const parentModal = this.closest(".modal");
            parentModal.classList.remove("modal_state_active");
            overlay.classList.remove("modal-bg_state_active");
            modalBody.classList.remove("modal-body_state_active");
            projectModalBody.classList.remove("modal-body_state_active");
            overlayProject.classList.remove("modal-bg_state_active");
            editProjectModalBody.classList.remove("modal-body_state_active");
            editOverlayProject.classList.remove("modal-bg_state_active");
        });
    });

function closeModal(e) {
    if (e.target.classList.contains("modal-bg")) {
        e.target.closest(".modal").classList.remove("modal_state_active");
        e.target.closest(".modal-bg").classList.remove("modal-bg_state_active");
        modalBody.classList.remove("modal-body_state_active");
        overlayProject.classList.remove("modal-bg_state_active");
        projectModalBody.classList.remove("modal-body_state_active");
        editProjectModalBody.classList.remove("modal-body_state_active");
        editOverlayProject.classList.remove("modal-bg_state_active");
    }
};

modalTask.forEach(modal => {
    modal.addEventListener('click', e => closeModal(e))
});

document.body.addEventListener("keyup",function (e) {
            const key = e.keyCode;
            if (key == 27) {
                document.querySelector(".modal.modal_state_active").classList.remove("modal_state_active");
                overlay.classList.remove("modal-bg_state_active");
                modalBody.classList.remove("modal-body_state_active");
                projectModalBody.classList.remove("modal-body_state_active");
                overlayProject.classList.remove("modal-bg_state_active");
                editProjectModalBody.classList.remove("modal-body_state_active");
                editOverlayProject.classList.remove("modal-bg_state_active");
            }
        },
        false
    );
});

HTML代码

<div class="modal modal_type_edit-project" data-modal="edit-project">
<div class="modal-bg modal-bg_type_edit-project">
    <div class="modal-body modal-body_type_edit-project">
        <div class="modal-content modal-callback">
            <div class="modal-callback__header">
                <h1 class="modal-callback__title">Change project name 👨‍💻</h1>
                <button class="modal-close">
                    <svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                            fill-rule="evenodd"
                            clip-rule="evenodd"
                            d="M16.7659 0.338019C17.0892 0.654618 17.0892 1.16792 16.7659 1.48452L9.72132 8.38128L16.7659 15.2781C17.0893 15.5947 17.0893 16.108 16.7659 16.4246C16.4425 16.7412 15.9182 16.7412 15.5948 16.4246L8.72774 9.70155L1.86066 16.4246C1.53728 16.7412 1.01297 16.7412 0.689589 16.4246C0.366206 16.108 0.366206 15.5947 0.689589 15.2781L7.73413 8.38131L0.689558 1.48452C0.366176 1.16792 0.366176 0.654618 0.689558 0.338019C1.01294 0.0214211 1.53725 0.0214211 1.86063 0.338019L8.72771 7.06104L15.5948 0.338019C15.9182 0.0214211 16.4425 0.0214211 16.7659 0.338019Z"
                            fill="#787486"
                        />
                    </svg>
                </button>
            </div>
            <form class="modal-callback__form">
                <div class="modal-callback__labels">
                    <label class="modal-callback__label">
                        Enter new name
                        <input type="text" class="modal-callback__input modal-callback__input_type_edit-project" placeholder="enter new name of project" />
                    </label>
                </div>
                <div class="modal-callback__btns">
                    <button class="modal-btn modal-btn_type_no-bg">Cancel</button>
                    <button class="modal-btn modal-btn_type_default modal-btn_type_edit-default">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

问题原因与解决方案

核心问题

你把modalAddBtn的click和keypress事件绑定写在了projectEditTitleBtn的点击事件回调里。每次点击打开modal的按钮，就会给保存按钮重复绑定一次事件，点击次数越多，绑定的事件就越多，触发时alert就会弹出多次——这个问题和if else逻辑无关。

修复方案

移出重复绑定的事件：把modalAddBtn的事件绑定移到projectEditTitleBtn的点击事件外面，只执行一次绑定，不要每次打开modal都重复绑定。
优化条件判断：原代码里if (projectNewTitle.value.length === 0 || "")有逻辑错误，""是真值，这个条件永远为true，改成if (!projectNewTitle.value.trim())可以更简洁地判断空输入（包括纯空格）。
改用if-else if-else结构：替代多个独立if，避免多个条件同时触发（比如输入为空时不会同时触发长度判断）。
封装重复代码：把关闭modal状态的重复代码封装成函数，方便维护。

修改后的JS示例

// 封装关闭所有modal状态的函数，减少重复代码
function closeAllModalStates() {
    overlay.classList.remove("modal-bg_state_active");
    modalBody.classList.remove("modal-body_state_active");
    overlayProject.classList.remove("modal-bg_state_active");
    projectModalBody.classList.remove("modal-body_state_active");
    editProjectModalBody.classList.remove("modal-body_state_active");
    editOverlayProject.classList.remove("modal-bg_state_active");
}

// 把modalAddBtn的事件绑定移到外面，只执行一次
modalAddBtn.forEach((modalAdd) => {
    modalAdd.addEventListener("click", function (e) {
        e.preventDefault();
        const inputValue = projectNewTitle.value.trim();
        
        if (!inputValue) {
            alert("fields cannot be empty!");
        } else if (inputValue.length > 25) {
            alert("The name of the project can not be longer than 25 characters!");
        } else {
            projectTitle.textContent = inputValue;
            sidebarProjectTitle.textContent = inputValue;
            const parentModal = this.closest(".modal");
            parentModal.classList.remove("modal_state_active");
            closeAllModalStates();
        }
    });

    modalAdd.addEventListener("keypress", function (event) {
        const inputValue = projectNewTitle.value.trim();
        
        if (!inputValue) {
            alert("fields cannot be empty!");
            return;
        }
        
        if (event.key === "Enter") {
            event.preventDefault();
            if (inputValue.length > 25) {
                alert("The name of the project can not be longer than 25 characters!");
            } else {
                projectTitle.textContent = inputValue;
                sidebarProjectTitle.textContent = inputValue;
                const parentModal = this.closest(".modal");
                parentModal.classList.remove("modal_state_active");
                closeAllModalStates();
            }
        }
    });
});

// 原来的projectEditTitleBtn点击事件，去掉里面的modalAddBtn绑定
projectEditTitleBtn.forEach((btn) => {
    btn.addEventListener("click", (e) => {
        let data = e.target.dataset.modalOpen;
        modalTask.forEach((modal) => {
            if (modal.dataset.modal == data) {
                openModalEditProject(modal);
            }
        });
    });

    closeButtons.forEach(function (item) {
        item.addEventListener("click", function (e) {
            const parentModal = this.closest(".modal");
            parentModal.classList.remove("modal_state_active");
            closeAllModalStates();
        });
    });

    cancelButtons.forEach(function (item) {
        item.addEventListener("click", function (e) {
            e.preventDefault();
            const parentModal = this.closest(".modal");
            parentModal.classList.remove("modal_state_active");
            closeAllModalStates();
        });
    });
});

function closeModal(e) {
    if (e.target.classList.contains("modal-bg")) {
        e.target.closest(".modal").classList.remove("modal_state_active");
        e.target.closest(".modal-bg").classList.remove("modal-bg_state_active");
        closeAllModalStates();
    }
};

modalTask.forEach(modal => {
    modal.addEventListener('click', e => closeModal(e))
});

document.body.addEventListener("keyup",function (e) {
    const key = e.keyCode;
    if (key == 27) {
        const activeModal = document.querySelector(".modal.modal_state_active");
        if (activeModal) {
            activeModal.classList.remove("modal_state_active");
            closeAllModalStates();
        }
    }
}, false);

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