JavaScript中close函数触发失效：点击关闭按钮viewbox未隐藏

嘿，这个问题我之前也碰到过！核心原因是你自定义的close()函数和浏览器内置的window.close()方法重名了。

当你在<h2>的onclick里写close()时，浏览器会优先调用那个用来关闭整个窗口的内置方法，而不是你写的用来隐藏viewbox的逻辑——这就是为什么点击后没反应的原因。

给你两个可行的解决方案：

方案1：重命名你的函数 #

最简单的办法就是把自定义的close函数改个名字，比如closeViewbox，然后同步修改内联调用的地方：

function expand(element) { 
  let viewbox = document.getElementById('viewbox'); 
  viewbox.style.display = "block"; 
  viewbox.innerHTML = "<h2 id='close' onclick='closeViewbox()'>Х</h2><img id='inner_image' src='" + element.firstChild.src + "'>"; 
} 
function closeViewbox() { 
  let viewbox = document.getElementById('viewbox'); 
  viewbox.style.display = "none"; 
}

方案2：使用事件监听（更推荐） #

内联事件处理函数很容易碰到这类命名冲突，而且还存在安全风险（比如如果图片src是用户可控的，可能会触发XSS）。更现代的写法是用addEventListener绑定事件：

function expand(element) { 
  let viewbox = document.getElementById('viewbox'); 
  viewbox.style.display = "block"; 

  // 创建关闭按钮并绑定点击事件
  const closeBtn = document.createElement('h2');
  closeBtn.textContent = 'Х';
  closeBtn.addEventListener('click', () => {
    viewbox.style.display = "none";
  });

  // 创建图片元素
  const innerImg = document.createElement('img');
  innerImg.src = element.firstChild.src;

  // 清空viewbox并添加新元素
  viewbox.innerHTML = '';
  viewbox.appendChild(closeBtn);
  viewbox.appendChild(innerImg);
}

这种写法不仅避免了命名冲突，代码也更健壮、易维护。

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