Chrome中切换标签页后几秒自动切回首个标签页的求助

看起来你遇到的是Chrome和Safari特有的事件重复触发问题，Firefox的事件模型在这一点上处理得更严谨。咱们一步步来分析和修复：

问题根源 #

你的代码里用window.onload模拟默认标签的点击，但在Chrome和Safari中，这个事件可能会被重复触发——比如页面里的动态加载资源（比如捐赠页面的支付脚本、图片）加载完成时，会再次触发window.onload，导致几秒后默认标签的点击事件被二次执行，强制切回首个标签。Firefox不会重复触发这个事件，所以功能正常。

修复方案 #

这里有几个递进的解决方案，你可以根据实际情况选择：

方案1：改用DOMContentLoaded事件（最简单） #

DOMContentLoaded在DOM结构构建完成后就执行，不需要等所有图片、脚本等资源加载完毕，能大幅降低重复触发的概率：

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

// 替换原来的window.onload
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById("defaultOpen").click();
});

方案2：添加执行标记（最稳妥，防止重复触发） #

如果页面确实有会重复触发load事件的脚本，给默认操作加一个标记，确保它只执行一次：

// 新增标记变量，记录是否已经初始化过默认标签
let hasSetDefaultTab = false;

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

window.addEventListener('load', function() {
  // 只有当标记为false时才执行默认操作
  if (!hasSetDefaultTab) {
    document.getElementById("defaultOpen").click();
    hasSetDefaultTab = true;
  }
});

方案3：直接操作DOM代替模拟点击（最可靠） #

模拟点击事件可能会有意外的连锁反应，直接通过DOM操作设置默认标签的状态，完全避免事件触发的问题：

function openCity(evt, cityName) {
  updateTabState(cityName, evt.currentTarget);
}

// 提取通用的标签状态更新函数
function updateTabState(targetTabId, activeTabLink) {
  var i, tabcontent, tablinks;
  // 隐藏所有标签内容
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  // 移除所有标签的active类
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  // 显示目标内容，设置当前标签为active
  document.getElementById(targetTabId).style.display = "block";
  activeTabLink.className += " active";
}

// 页面加载时直接设置默认标签，不用模拟点击
document.addEventListener('DOMContentLoaded', function() {
  // 替换成你首个标签的ID（比如如果首个标签是"London"就填这个）
  const defaultTabId = "你的首个标签ID";
  const defaultTabLink = document.getElementById("defaultOpen");
  updateTabState(defaultTabId, defaultTabLink);
});

额外排查建议 #

你可以打开Chrome的开发者工具（F12），切换到Sources面板，给document.getElementById("defaultOpen").click()这行代码加个断点，看看是不是有其他脚本在延迟执行时触发了这个操作——捐赠页面通常会有第三方支付或统计脚本，可能会意外触发load事件。

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