本文详解如何在嵌套式井字棋（九宫格中每个格子本身又是九宫格）中，精准地将 SVG 形状（X 或 O）插入用户点击的具体 .cell 元素内，避免全局查询导致的错位问题。
本文详解如何在嵌套式井字棋（九宫格中每个格子本身又是九宫格）中，精准地将 svg 形状（x 或 o）插入用户点击的具体 `.cell` 元素内，避免全局查询导致的错位问题。
在构建递归式 Tic-Tac-Toe（即“元井字棋”）时，一个常见陷阱是：所有单元格共享同一 onclick="play()" 事件处理器，而 play() 函数内部使用 document.querySelector(".cell") —— 这会始终匹配 DOM 中第一个 .cell，导致无论点击哪个格子，SVG 都被插入到首个格子中。
根本解法是：将被点击的 DOM 元素作为参数传递给事件处理函数，从而实现“上下文感知”的精准插入。
✅ 正确做法：传入 this，操作当前元素
修改 HTML 模板中的 onclick 绑定，显式传入当前 <div class="cell"> 元素：<pre class="brush:php;toolbar:false;"><div class="cell" data-cell onclick="play(this)">
<p>同时更新 <code>play()</code> 函数签名与逻辑，接收该元素并直接在其内部追加 SVG：</p>
<pre class="brush:php;toolbar:false;">function play(cell) {
let svg;
if (turn === "x") {
svg = create_elements_from_html(1, `
<svg viewbox="0 0 100 100" class="mark-svg"><path class="x_cell_path" d="M 10 10 L 90 90 Z M 10 90 L 90 10"></path></svg>
`);
turn = "o";
} else {
svg = create_elements_from_html(1, `
<svg viewbox="0 0 100 100" class="mark-svg"><circle class="o_cell_path" r="40" cx="50" cy="50"></circle></svg>
`);
turn = "x";
}
// ? 关键：直接 append 到传入的 cell 元素，而非全局查询
cell.appendChild(svg);
}</pre>
<blockquote><p>⚠️ 注意：原代码中 <code>turn = "x" 在 else 块末尾被忽略（因 return 提前退出），已移至逻辑末尾确保执行；同时建议用 === 替代 == 提升类型安全。
? 进阶防护：防止重复落子
为提升健壮性，应在插入前检查目标 .cell 是否已有子 SVG（即是否已被占用）：
function play(cell) {
// 防止重复点击已落子的格子
if (cell.querySelector("svg.mark-svg")) return;
let svg;
if (turn === "x") {
svg = create_elements_from_html(1, `
<svg viewbox="0 0 100 100" class="mark-svg"><path class="x_cell_path" d="M 10 10 L 90 90 Z M 10 90 L 90 10"></path></svg>
`);
turn = "o";
} else {
svg = create_elements_from_html(1, `
<svg viewbox="0 0 100 100" class="mark-svg"><circle class="o_cell_path" r="40" cx="50" cy="50"></circle></svg>
`);
turn = "x";
}
cell.appendChild(svg);
}
? 补充建议：现代写法更推荐事件委托 + addEventListener
虽然内联 onclick 可快速验证逻辑，但长期维护推荐解耦事件绑定：
// 替代内联 onclick，统一委托监听
document.addEventListener("click", (e) => {
if (e.target.classList.contains("cell")) {
play(e.target);
}
});
并在创建 .cell 时移除 onclick 属性：
let cell = create_elements_from_html(1, `<div class="cell" data-cell></div>`);
这样既保持结构清晰，又利于调试与扩展（如添加禁用状态、动画反馈等）。
通过将事件源元素作为参数传递，并配合防重校验，即可确保每个子格独立响应点击，真正实现“所点即所得”的嵌套井字棋交互体验。
