SVG Tic Tac Toe 点击失效问题的根源与解决方案-js教程-PHP中文网

SVG 元素渲染顺序导致点击区域被后续绘制的和遮挡，使 onclick 事件无法稳定触发；正确做法是用 display="none" 初始隐藏图形元素，并通过 JavaScript 动态控制显示，确保点击始终落在可交互的上。

svg 元素渲染顺序导致 `` 点击区域被后续绘制的 `` 和 `` 遮挡，使 onclick 事件无法稳定触发；正确做法是用 `display="none"` 初始隐藏图形元素，并通过 javascript 动态控制显示，确保点击始终落在可交互的 `` 上。

在 SVG 中，绘制顺序即堆叠顺序（painting order）：后定义的元素默认覆盖在先定义的元素之上。在原始代码中，9 个（作为棋盘格）被最先声明，而所有（X）和（O）随后逐个追加——这意味着每个格子上方实际覆盖着多个透明图形元素（stroke="transparent" 但占据渲染空间）。尽管视觉上不可见，这些元素仍会捕获鼠标事件，导致的 onclick 仅在“空隙”或边缘处偶然生效，表现为“随机触发”。

✅ 正确解法不是依赖 stroke="transparent" 的视觉隐藏，而是使用 display="none" 彻底移除元素的渲染与事件捕获能力。这样成为该区域唯一可响应点击的元素，点击行为将 100% 可靠。

以下是关键修复要点：

1. 初始化时隐藏所有 X/O 图形

将所有和的 stroke 改为 "black"（或所需颜色），并统一添加 display="none" 属性：

CSS3 SVG带控件的顶部导航栏代码

CSS3 SVG带控件的顶部导航栏代码是一款功能强大的带控件的超实用网页顶部导航栏。

下载

<line x1="20" y1="20" x2="130" y2="120" display="none" stroke="black" stroke-width="5" id="x1l"></line><circle cx="70" cy="70" r="60" display="none" stroke="black" stroke-width="5" fill="transparent" id="circle1"></circle>

2. JavaScript 中通过 display 属性控制显隐

修改 clickedSquare() 函数，检查 display 值而非 stroke，并使用 display="inline"（SVG 中等效于 display="block" 或直接 display=""，但 "inline" 更明确）激活图形：

function clickedSquare(x1, x2, o) {
  const eleX = document.getElementById(x1);
  const eleXR = document.getElementById(x2);
  const eleO = document.getElementById(o);

  // 检查是否为空位：两个图形都未显示
  if (eleX.style.display === "none" && eleO.style.display === "none") {
    if (whosTurn === "x") {
      eleX.style.display = "inline";
      eleXR.style.display = "inline";
      whosTurn = "o";
    } else {
      eleO.style.display = "inline";
      whosTurn = "x";
    }
  }
}