phaser 中使用 `this.add.dom()` 加载 html ui 后，若在 `update` 阶段重复绑定事件监听器，会导致监听器被疯狂叠加、无法触发且无报错；正确做法是仅在 `create` 阶段一次性绑定。
在 Phaser 3 中，通过 this.add.dom(x, y).createFromCache('ui') 加载的 DOM 元素（如 ui.html）确实会渲染到游戏画布上，但其事件绑定有严格时机要求：必须在 create 方法中完成，绝不可置于 update 方法内。
❌ 错误示例（导致失效的根本原因）
update() {
// ⚠️ 危险！每秒约60次重复添加监听器
document.querySelector("#dirt").addEventListener("click", () => {
console.log("add dirt");
});
}该写法不仅不会触发点击日志，还会因监听器持续堆积引发内存泄漏、性能骤降，甚至使 DOM 节点响应完全失灵——因为浏览器可能已为同一元素绑定了数百个相同回调，而 Phaser 的 DOM 容器更新机制也可能干扰原生事件流。
✅ 正确做法：在 create 中一次性绑定
确保 DOM 元素已加载完成后再操作。推荐使用 domElement.node 获取底层 HTML 元素，并在 create 中安全绑定：
create() {
// 1. 添加 DOM 元素（需确保 'ui' 已预加载到 cache）
const domElement = this.add.dom(0, 0).createFromCache('ui');
// 2. 等待 DOM 渲染完成（关键！）
this.time.delayedCall(0, () => {
const button = domElement.node.querySelector('#dirt');
if (button) {
button.addEventListener('click', () => {
console.log('add dirt'); // ✅ 现在可正常输出
// 此处可调用游戏逻辑，如 this.addDirt()
});
}
});
}? 提示：delayedCall(0, ...) 是一种轻量级“微任务等待”，能确保 domElement.node 已真实挂载到文档中。也可改用 domElement.once('addedtoscene', ...)（需 Phaser ≥ 3.60+），但 delayedCall(0) 兼容性更广。
? 补充验证建议
- 检查 ui.html 是否已通过 this.load.html('ui', 'assets/ui.html') 正确预加载；
- 在 create 中打印 domElement.node 和 domElement.node.querySelector('#dirt')，确认节点存在；
- 避免在 update 或 preUpdate 中访问或操作 domElement.node——这些生命周期中 DOM 可能尚未稳定。
✅ 总结
Phaser DOM UI 的交互本质仍是原生 Web API，但受游戏循环约束。事件监听器必须“单次、及时、稳定”地注册于 create 阶段，这是保证响应性与性能的黄金准则。遵循此模式，即可让按钮、输入框、滑块等 HTML 控件无缝融入 Phaser 游戏逻辑。
