向文档添加元素后addEventListener失效，枪械停止旋转如何解决？

问题根源 #

你遇到的枪械停止旋转问题，本质不是mousemove事件监听失效，而是使用innerHTML +=更新#space元素时，会销毁并重新渲染该容器内的所有原有DOM节点（包括#gun）。你的mouseMove函数应该是基于初始的#gun元素进行旋转计算的，新生成的#gun节点没有关联原来的旋转逻辑，所以看起来枪械不再响应鼠标移动。

修复方案 #

替换innerHTML +=的写法，改用不会破坏原有DOM结构的方式添加子弹：

方案1：使用appendChild创建并添加元素

function fire(){
    let bullet = document.createElement('div');
    bullet.className = 'bullet';
    bullet.style.left = `${shooterPlace.x}px`;
    bullet.style.top = `${shooterPlace.y}px`;
    document.getElementById("space").appendChild(bullet);
}

方案2：使用insertAdjacentHTML插入HTML字符串

function fire(){
    let bullet = `<div class="bullet" style="left:${shooterPlace.x}px;top:${shooterPlace.y}px;"></div>`;
    document.getElementById("space").insertAdjacentHTML('beforeend', bullet);
}

补充说明 #

innerHTML +=的工作逻辑是：先读取容器当前的HTML内容，拼接新字符串后，再将完整的新字符串重新赋值给容器。这个过程会删除容器内所有旧的DOM节点，重新创建新节点，不仅会丢失原有元素的事件绑定，还会重置元素的状态，这就是导致枪械旋转失效的核心原因。而上面两种方案只会在容器末尾添加新元素，完全不会影响原有DOM结构和逻辑。

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