为什么部分onclick事件触控板点击生效鼠标点击却不生效？

架构老林

2026-10-2

问题排查结果

我找到了三处会导致你描述的点击行为异常的问题：

第一处是updateUpgrades方法中的语法错误：click类型升级项的判断分支中，你错误使用了未定义的变量index，当前循环的迭代变量是i，这里应该改为upgrade.requirement[i]。未定义变量会触发JS运行时报错，导致部分场景下DOM元素渲染、事件绑定异常。
第二处是HTML属性拼接不规范：你拼接的onclick属性值没有用引号包裹，不同浏览器对无引号属性值的解析逻辑存在差异，会直接导致不同输入设备的事件触发行为不一致。
第三处是img元素缺少可交互标记：img标签默认不属于可交互元素，部分浏览器对非交互元素的鼠标点击事件响应优先级低于触控事件，这也是你触控板点击可以触发、鼠标点击无响应的直接原因。

修正代码

你可以直接替换原有的updateUpgrades方法即可解决问题：

updateUpgrades: function () {
    const upgradeContainer = document.getElementById("upgradeContainer");
    upgradeContainer.innerHTML = "";
    for (var i = 0; i < upgrade.name.length; i++) {
      if (!upgrade.purchased[i]) {
        if (upgrade.type[i] == "building" && building.count[upgrade.buildingIndex[i]] >= upgrade.requirement[i]) {
          upgradeContainer.innerHTML += `<img src="${upgrade.image[i]}" title="${upgrade.name[i]} &#10;${upgrade.description[i]}&#10;(${upgrade.cost[i]} bitcoin)" onclick="upgrade.purchase(${i})" style="cursor: pointer;">`;

        } else if (upgrade.type[i] == "click" && game.totalClicks >= upgrade.requirement[i]){
               upgradeContainer.innerHTML += `<img src="${upgrade.image[i]}" title="${upgrade.name[i]} &#10;${upgrade.description[i]} &#10;(${upgrade.cost[i]} bitcoin)" onclick="upgrade.purchase(${i})" style="cursor: pointer;">`;
        } 
      }
    }
  }

修正逻辑说明：