关闭Modal后页面与JS冻结的原因咨询（HTML、JS）

你遇到的页面交互失效（表现为冻结）核心原因是使用document.body.innerHTML +=添加模态框的操作破坏了原有DOM结构与事件绑定：

当执行document.body.innerHTML += ...时，浏览器会完成以下操作：

1. 将当前<body>内的所有内容序列化为HTML字符串
2. 拼接上新的模态框HTML字符串
3. 将拼接后的完整字符串重新设置为<body>的innerHTML

这个过程会销毁原有页面中的所有DOM节点（包括#div_1下的<p>、#open_modal等节点），然后重新创建全新的DOM节点。而你之前通过addEventListener绑定的事件处理器都是绑定在旧DOM节点上的，新创建的节点没有绑定任何事件，导致后续点击这些元素时没有响应，看起来像是页面冻结。

此外，#open_modal的事件监听器也会因为原节点被销毁而失效，导致第二次点击"open the modal"时毫无反应，进一步加剧了"页面冻结"的错觉。

方案1：避免使用innerHTML修改body，改用DOM API创建模态框 #

这种方式不会破坏原有DOM结构，保留所有事件绑定：

document.querySelector("#open_modal").addEventListener("click", () => {
    if (!document.querySelector("#modal")) {
        // 创建模态框容器
        const modal = document.createElement('div');
        modal.id = 'modal';
        modal.style.cssText = `display: block; position: fixed; padding-top: 200px; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4)`;
        
        // 创建模态框内容
        const modalContent = document.createElement('div');
        modalContent.id = 'modal_content';
        
        // 创建关闭按钮
        const closeBtn = document.createElement('span');
        closeBtn.id = 'modal_close';
        closeBtn.innerHTML = '×';
        closeBtn.addEventListener('click', () => {
            modal.style.display = 'none';
        });
        
        // 创建模态框文本
        const modalText = document.createElement('p');
        modalText.style.color = 'green';
        modalText.textContent = 'Some text in the Modal..';
        
        // 组装元素并添加到body
        modalContent.appendChild(closeBtn);
        modalContent.appendChild(modalText);
        modal.appendChild(modalContent);
        document.body.appendChild(modal);
    } else {
        document.querySelector("#modal").style.display = "block";
    };
});

方案2：提前在页面中写好模态框，通过CSS控制显示/隐藏 #

这种方式最简洁，完全避免DOM结构修改：

<!-- 提前添加模态框到页面 -->
<div id="modal" style="display: none; position: fixed; padding-top: 200px; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4)">
    <div id="modal_content">
        <span id="modal_close">&times;</span>
        <p style="color: green;">Some text in the Modal..</p>
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", () => {
    let test = document.querySelector("#div_1")
    for (let i = 0; i < test.children.length; i++) {
        test.children[i].addEventListener("click", () => {
            console.log(test.children[i].innerHTML)
        });
    };

    // 绑定模态框相关事件
    document.querySelector("#open_modal").addEventListener("click", () => {
        document.querySelector("#modal").style.display = "block";
    });

    document.querySelector("#modal_close").addEventListener("click", () => {
        document.querySelector("#modal").style.display = "none";
    });
});
</script>

额外优化：使用事件委托简化事件绑定 #

如果后续仍有DOM节点动态变更的需求，建议使用事件委托，将事件绑定在父元素上，避免节点更新导致事件失效：

document.addEventListener("DOMContentLoaded", () => {
    // 事件委托：绑定在#div_1上，处理所有子p标签的点击
    document.querySelector("#div_1").addEventListener("click", (e) => {
        if (e.target.tagName === 'P') {
            console.log(e.target.innerHTML);
        }
    });
});

内容的提问来源于stack exchange，提问作者Thorsten Franz Brune