井字棋开发问题：单次点击限制导致撤销后格子无法点击

你原来用onclick="myFunction(); this.onclick=null;"的方式，确实能阻止重复点击，但撤销时因为事件直接被移除，自然没法恢复。核心问题是你用移除事件的方式控制状态，而不是反过来用状态控制事件是否生效。

给你几个实用的方案，随便挑哪个都能解决问题：

方案1：用自定义属性标记格子状态 #

给每个格子加个data-clicked属性记录是否被点击，事件里先判断状态，再执行逻辑：

• HTML格子写法：

<div class="cell" onclick="handleCellClick(this)"></div>

• 事件处理与撤销函数：

function handleCellClick(cell) {
  // 已经点过就直接返回，不执行逻辑
  if (cell.dataset.clicked === 'true') return;
  
  // 执行你原来的下棋逻辑，比如调用myFunction
  myFunction(cell);
  
  // 标记为已点击
  cell.dataset.clicked = 'true';
}

// 撤销示例：假设你拿到要撤销的格子元素
function undoMove(cell) {
  // 先清空格子里的内容（比如X/O）
  cell.textContent = '';
  // 把状态改回去，恢复可点击
  cell.dataset.clicked = 'false';
}

方案2：用CSS类控制禁用状态 #

给已点击的格子加个clicked类，既可以做视觉提示，又能用来判断状态：

• CSS先写个样式（可选但友好）：

.cell.clicked {
  background-color: #eee;
  pointer-events: none; /* 可选，直接阻止鼠标点击事件 */
}

• HTML和JS：

<div class="cell" onclick="handleCellClick(this)"></div>

function handleCellClick(cell) {
  if (cell.classList.contains('clicked')) return;
  
  myFunction(cell);
  cell.classList.add('clicked');
}

function undoMove(cell) {
  cell.textContent = '';
  cell.classList.remove('clicked');
}

这里pointer-events: none是额外的交互防护，但JS里的判断还是要留着，防止一些绕过CSS的情况。

方案3：集中管理状态（适合更规范的代码） #

如果不想用内联onclick，可以用事件委托+状态数组来统一管理：

• HTML结构：

<div id="board">
  <div class="cell"></div>
  <div class="cell"></div>
  <!-- 剩下7个格子 -->
</div>

• JS代码：

const board = document.getElementById('board');
// 用数组记录9个格子的状态，初始都是未点击（false）
const cellStates = Array(9).fill(false);

// 给棋盘加一个事件监听器，统一处理所有格子点击
board.addEventListener('click', (e) => {
  const cell = e.target;
  // 点击的不是格子就跳过
  if (!cell.classList.contains('cell')) return;
  
  // 拿到格子的索引
  const index = Array.from(board.children).indexOf(cell);
  // 已经点过就返回
  if (cellStates[index]) return;
  
  // 执行下棋逻辑
  myFunction(cell);
  // 更新状态
  cellStates[index] = true;
});

// 撤销函数：传入要撤销的格子索引
function undoMove(index) {
  const cell = board.children[index];
  cell.textContent = '';
  cellStates[index] = false;
}

这几个方案的核心都是保留事件监听器，用状态来决定是否执行下棋逻辑，撤销的时候只需要把对应格子的状态改回去，自然就能恢复可点击了。

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