关闭window.open打开的窗口后，点击父页面窗口自动重开问题求助

这问题我之前帮不少开发者排查过，十有八九是父页面的点击事件绑定逻辑出了问题——你大概率把打开窗口的代码直接挂在了全局点击事件（比如document或者body的click事件）上，而且没有做任何判断，导致每次点击父页面的任意区域，都会重复执行window.open，哪怕之前的窗口已经关闭了。

常见错误场景 #

1. 全局点击事件直接绑定打开窗口代码 #

比如你可能写了类似这样的代码：

// 错误示例：全局点击都会触发打开窗口
document.addEventListener('click', function() {
  var win = window.open('URL HERE', type, 'width=1100,height=500,left=200,top=200');
});

这种写法下，不管你点击父页面的哪里，哪怕是空白区域，都会执行打开窗口的逻辑，关闭窗口后再点击自然会重新打开。

2. 未判断窗口的存活状态 #

就算你用变量存储了窗口实例，但如果没有在点击事件里检查窗口是否已关闭，也会重复打开：

let win;
// 错误示例：没检查窗口状态，每次点击都重新创建
document.addEventListener('click', function() {
  win = window.open('URL HERE', type, 'width=1100,height=500,left=200,top=200');
});

正确的解决办法 #

方案一：绑定到特定触发元素的点击事件 #

不要把打开窗口的逻辑绑在全局点击上，而是只绑定到按钮、链接这类专门的触发元素上，同时加入窗口状态判断：

<!-- 页面上的触发按钮 -->
<button id="openWindowBtn">打开操作窗口</button>

<script>
let win;
// 只给特定按钮绑定点击事件
document.getElementById('openWindowBtn').addEventListener('click', function(e) {
  // 阻止事件冒泡，避免触发父元素的其他点击逻辑
  e.stopPropagation();
  
  // 只有窗口不存在或者已关闭时，才重新打开
  if (!win || win.closed) {
    // 第二个参数设为固定名称（比如'myOperationWindow'），可以复用窗口
    win = window.open('URL HERE', 'myOperationWindow', 'width=1100,height=500,left=200,top=200');
  } else {
    // 如果窗口已经打开，直接把它调到前台
    win.focus();
  }
});
</script>

方案二：若必须用全局点击，添加严格的触发条件 #

如果你的业务逻辑确实需要全局点击触发，一定要加判断条件，比如只有点击特定区域或元素时才执行打开窗口的逻辑：

let win;
document.addEventListener('click', function(e) {
  // 只有点击带有.open-window-trigger类的元素时才触发
  if (!e.target.closest('.open-window-trigger')) {
    return;
  }
  
  e.stopPropagation();
  if (!win || win.closed) {
    win = window.open('URL HERE', 'myOperationWindow', 'width=1100,height=500,left=200,top=200');
  } else {
    win.focus();
  }
});

额外注意事项 #

• 窗口名称（window.open的第二个参数）建议设为固定值，这样如果窗口还没关闭，再次点击会复用该窗口而不是新建。
• 一定要用e.stopPropagation()阻止事件冒泡，避免触发父元素的其他点击事件导致重复执行。
• 排查时可以在window.open代码前加console.log，看看每次点击父页面时是否都会触发这个函数，快速定位问题。

内容的提问来源于stack exchange，提问作者Web Pro Source