点击按钮时Safari抛出ReferenceError:找不到togglePopUp，其他浏览器正常求排查

我帮你梳理下这个问题——你碰到的是Safari对命名函数表达式的作用域处理和其他浏览器不一致导致的，具体原因和解决方法如下：

问题原因 #

核心有两点：

• 你使用的是命名函数表达式：var togglePopUp = function togglePopUp() {}。在Safari中，这种写法下，外部的togglePopUp变量不会被自动挂载到全局window对象上；但其他浏览器（包括IE）会做隐式兼容处理，把这个变量暴露到全局作用域，所以内联onclick能正常调用。
• HTML内联事件处理程序（比如onclick="togglePopUp()"）是在全局作用域执行的。如果你的函数不是全局变量，Safari会严格抛出"找不到变量"的错误，而其他浏览器的兼容行为让它能正常运行。

另外如果你的代码是包裹在局部作用域里（比如DOM加载完成的回调函数），理论上所有浏览器都应该报错，但Safari的规则执行更严格，这也会导致只有它出现问题。

解决建议 #

给你三个可行的方案，按推荐程度排序：

方案1：改用addEventListener绑定事件（最推荐） #

内联事件本身就有作用域混乱、难以维护的问题，直接用JS绑定事件可以彻底避免全局作用域依赖：

// 先获取按钮元素
const openBtn = document.querySelector('.btn');
// 绑定点击事件
openBtn.addEventListener('click', togglePopUp);

然后把HTML里的onclick属性删掉：

<button class="btn">Click</button>

这种写法在所有浏览器上表现一致，代码结构也更清晰。

方案2：改用函数声明替代命名函数表达式 #

把函数改成标准的函数声明，它会被自动提升到全局作用域，所有浏览器都能找到：

function togglePopUp() {
  modalOpen = !modalOpen;
  formPopUp.classList.toggle('active');
  if (modalOpen) {
    document.body.style.overflow = 'hidden';
  } else {
    document.body.style.overflow = 'auto';
  }
}

顺便提一句，直接给style赋值字符串不如单独设置属性更规范，上面我帮你调整了写法。

方案3：显式将函数挂载到全局window对象 #

如果一定要保留命名函数表达式，可以手动把变量挂到window上，确保内联事件能找到：

var togglePopUp = function togglePopUp() {
  // 原函数内容不变
};
// 显式暴露到全局作用域
window.togglePopUp = togglePopUp;

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