在井字棋等回合制游戏中，需确保每个格子只能被点击一次并显示固定标记（如 "x" 或 "o"），避免重复点击导致内容被覆盖。本文介绍两种可靠方案：现代浏览器推荐使用 addeventlistener 的 { once: true } 选项；兼容旧版 ie 则可通过手动移除事件监听器实现。
要让按钮（或任何 DOM 元素）的 textContent 在首次点击后“永久锁定”，核心思路是：阻止后续点击触发状态更新逻辑。这并非真正“锁定属性”，而是通过控制事件响应机制来保障数据一致性。
✅ 推荐方案：使用 { once: true }（现代浏览器首选）
addEventListener 支持一个可选参数对象，其中 once: true 表示该监听器仅执行一次，之后自动移除。简洁、高效、语义清晰：
const playRound = (e) => {
const player = getActivePlayer();
e.currentTarget.textContent = player.marker;
placeMarker(e.currentTarget.dataset.number, player.marker);
_switchPlayerTurn();
printNewRound();
};
const board = document.querySelectorAll('.square');
board.forEach(element => {
element.addEventListener('click', playRound, { once: true });
});✅ 优势：代码量少、无副作用、无需维护额外状态（如已点击标志）、天然防重入。 ⚠️ 注意：IE 不支持此选项（Can I Use: once），若需兼容 IE11 及更早版本，请采用下方兼容方案。
? 兼容方案：手动移除监听器（全浏览器支持）
适用于必须支持 Internet Explorer 的项目。原理是在回调中执行业务逻辑后，立即调用 removeEventListener 清理自身：
const playRound = (e) => {
const player = getActivePlayer();
e.currentTarget.textContent = player.marker;
placeMarker(e.currentTarget.dataset.number, player.marker);
_switchPlayerTurn();
printNewRound();
};
const board = document.querySelectorAll('.square');
board.forEach(element => {
const handler = (e) => {
playRound(e);
element.removeEventListener('click', handler); // 关键：执行后立即解绑
};
element.addEventListener('click', handler);
});该方式逻辑明确、兼容性好，但需注意：必须使用具名函数引用（不能传匿名函数），否则 removeEventListener 无法匹配并移除对应监听器。
? 补充建议：增强健壮性（可选）
虽然上述方案已解决核心问题，但实践中建议叠加一层防御性检查，提升可维护性与调试体验：
const playRound = (e) => {
const el = e.currentTarget;
// 防御性检查：若已有内容，直接退出（双重保险）
if (el.textContent.trim() !== '') {
console.warn('Attempted to overwrite occupied cell:', el);
return;
}
const player = getActivePlayer();
el.textContent = player.marker;
placeMarker(el.dataset.number, player.marker);
_switchPlayerTurn();
printNewRound();
};这样即使事件监听器因异常未被正确移除（极小概率），也能避免意外覆盖，同时提供清晰的调试提示。
✅ 总结
- 优先使用 { once: true }：简洁、安全、符合现代 Web 标准，适用于 Chrome/Firefox/Safari/Edge（≥79）等主流浏览器。
- 兼容 IE 时用 removeEventListener 手动解绑：需确保传入相同函数引用，稍显冗余但 100% 兼容。
- 不推荐仅依赖 textContent 判断是否已占用（如 if (!el.textContent) {...}）：虽可行，但属于运行时防护，不如事件层拦截彻底；应作为辅助校验而非主逻辑。
通过合理选择事件绑定策略，你不仅能稳定控制 UI 状态，还能让游戏逻辑更清晰、更易测试与扩展。
