JavaScript游戏开发中部分元素onclick事件失效问题求助

我用JavaScript开发游戏，尝试创建带click事件的button元素并添加到场景里，之前多次实现过相同逻辑，但现在代码出问题了。

简化问题代码 #

const testme = document.createElement('input');
testme.type = 'button';
testme.value = 'click me';
testme.addEventListener('click', () => {
  alert('clicked');
});
outputElement.appendChild(testme);

异常现象 #

• 按钮能正常渲染，但点击后完全没反应
• 如果不使用匿名函数，写成testme.addEventListener('click', alert('clicked'));，代码会立即执行一次（仅一次）
• 把元素添加到document.body（document.body.appendChild(testme)）时，按钮点击完全正常

outputElement是通过const outputElement = document.getElementById('output');获取的普通div，我有其他用outputElement.appendChild的函数能正常运行，比如：

正常工作的输入框代码 #

function chooseName() {
  const nameInput = document.createElement('input');
  nameInput.type = 'text';
  nameInput.id = 'name-input';
  nameInput.addEventListener('keydown', (event) => {
    if (event.key === 'Enter') {
      const playerName = nameInput.value.trim();
      if (playerName !== '') {
        setPlayerName(playerName);
        output(`Your name is ${getPlayerName()}`);
        gameState = 'chooseOccupation';
        document.getElementById('name-input').remove();
        promptOccupation();
      } else {
        output('Please enter a valid name.');
      }
    }
  });

  outputElement.appendChild(nameInput);
  nameInput.focus();
}

正常工作的职业选择列表代码 #

const occupations = [
  'Archaeologist', 'Astrologer', 'Brewer', 'Burglar', 'Clergyman', 'Courier',
  'Dramatist', 'Ditch digger', 'Forester', 'Gambler', 'Hangman', 'Healer',
  'Jeweler', 'Netmaker', 'Ostler', 'Scribe', 'Taxidermist', 'Trapper',
  'Undertaker', 'Weaver'
];

const occupationList = document.createElement('div');
for (occupation of occupations) {
  const occupationButton = document.createElement('p');
  const job = occupation;
  occupationButton.textContent = occupation;
  occupationButton.classList.add('clickable-text');
  occupationButton.addEventListener('click', () => chooseOccupation(job));
  occupationList.appendChild(occupationButton);
}
outputElement.appendChild(occupationList);

项目规模较大（5个以上文件、数百行代码），无法提供可复现示例，想知道可能的原因。

补充测试发现 #

把测试代码放到chooseName()函数内：

function chooseName() {
  const testme = document.createElement('input');
  testme.type = 'button';
  testme.value = 'click me';
  testme.addEventListener('click', () => {
    alert('clicked');
  });

  const nameInput = document.createElement('input');
  nameInput.type = 'text';
  nameInput.id = 'name-input';
  outputElement.appendChild(testme);
  nameInput.addEventListener('keydown', (event) => {
    if (event.key === 'Enter') {
      const playerName = nameInput.value.trim();
      if (playerName !== '') {
        setPlayerName(playerName);
        output(`Your name is ${getPlayerName()}`);
        gameState = 'chooseOccupation';
        document.getElementById('name-input').remove();
        promptOccupation();
      } else {
        output('Please enter a valid name.');
      }
    }
  });
}

此时按钮仅在输入名字前点击有效，输入名字后点击无响应。

可能的原因 #

• 事件传播被阻止：outputElement或其父元素的事件处理逻辑中，可能调用了event.stopPropagation()或event.stopImmediatePropagation()，阻断了按钮点击事件的传递；或者存在pointer-events: none这类CSS样式禁用了交互。
• 元素被覆盖：输入名字后，promptOccupation()可能向outputElement中添加了新元素，这些元素的层级（z-index）高于测试按钮，导致实际点击的是上层元素而非按钮。
• outputElement被替换：output()或promptOccupation()函数中，可能重新创建了outputElement（比如通过innerHTML重写、替换DOM节点），原来的按钮所在的旧元素已经被移除出DOM，事件自然失效。
• 游戏状态切换导致的事件清理：当gameState切换到chooseOccupation时，可能有全局的事件监听清理逻辑，误移除了按钮的点击事件，或者相关的上下文被销毁。
• 委托事件冲突：如果项目中使用了事件委托来处理点击事件，当状态切换后，委托的选择器不再匹配测试按钮，导致事件无法触发。

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