innerhtml 替换会销毁子元素及事件监听器，导致 stoppropagation 失效；应改用事件委托，将监听器绑定在稳定父容器上，通过 e.target 匹配目标元素再调用 e.stoppropagation()。
直接用 innerHTML 替换整个容器内容，会把里面所有已绑定的事件监听器一并清空——包括你之前为按钮、图标等元素设置的 stopPropagation() 逻辑。这不是“逻辑丢失”，而是 DOM 元素被销毁重建后，原来的 JS 绑定自然失效了。
问题本质：innerHTML 会重置整个子树
每次执行类似 container.innerHTML = newHTML，浏览器会：
- 完全移除
container下所有现有子节点（含事件监听器） - 解析新 HTML 字符串，创建全新的一批 DOM 元素
- 这些新元素没有绑定任何事件，
stopPropagation()当然不生效
推荐解法：改用事件委托（Event Delegation）
不再给每个动态生成的子元素单独绑定事件，而是把监听器挂在父容器上，利用冒泡机制捕获目标，再按需调用 e.stopPropagation()：
- 父容器保持稳定，不会被
innerHTML清掉，监听器一直存在 - 点击任意子元素时，事件冒泡到父容器，通过
e.target判断是否是你要处理的按钮或图标 - 只在匹配的目标上执行
e.stopPropagation()，不影响其他逻辑
示例：
document.getElementById("list").addEventListener("click", e => {<br> if (e.target.matches(".delete-btn")) {<br> e.stopPropagation(); // 只阻止删除按钮的冒泡<br> deleteItem(e.target.dataset.id);<br> }<br>});
替代方案：重新绑定（仅限简单场景）
如果必须用 innerHTML，且结构简单、元素少，可在刷新后立即补绑：
- 把事件绑定逻辑抽成一个函数，比如
bindStopPropagation() - 每次
innerHTML更新完，立刻调用它，重新为新生成的元素绑定 - 注意避免重复绑定：先用
removeEventListener清理旧监听器，或用命名函数确保可移除
更稳妥的做法：避免 innerHTML 刷新关键交互区域
对包含按钮、开关、关闭图标等需要精细事件控制的区域，尽量不用 innerHTML 整体替换：
- 用
textContent或innerText更新纯文本 - 用
setAttribute()或dataset更新属性值 - 只对真正需要重绘的部分使用
insertAdjacentHTML()或append()
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
