window.onload绑定函数在关闭Overlay时重复触发的原因排查

嘿，我一眼就注意到最可能的问题点了——你用来关闭Overlay的select-rules-button很大概率是个表单提交按钮（比如<button type="submit">），或者它嵌套在一个<form>标签里，但你没阻止表单的默认提交行为。

你想啊，当你点击这个按钮时，浏览器会默认触发表单提交，这会导致页面重新加载。而页面一刷新，window.onload事件自然会再次触发，也就会再次调用openRulesOverlay()，这就解释了为什么你觉得关闭Overlay时这个函数也在执行。

你的saveRuleSelections()函数里只是做了存数据和隐藏Overlay的操作，但完全没处理按钮的默认行为，所以浏览器还是会按默认逻辑走。

给你两个简单的解决办法：

• 方法一：修改按钮类型
  直接在HTML里把按钮改成普通按钮，避免触发表单提交：

  <button id="select-rules-button" type="button">保存规则</button>
  

  （如果原本按钮的type是submit，改成button就不会触发页面刷新了）

• 方法二：在点击事件里阻止默认行为
  如果你不想改HTML，可以在JS的点击事件处理函数里加上阻止默认行为的代码：

  document.getElementById("select-rules-button").onclick = function(e){
      e.preventDefault(); // 拦住浏览器的默认提交动作
      saveRuleSelections();
  };
  

另外给你个小建议：你现在用window.onload = function(){...}的方式绑定事件，这种方式是覆盖式的——如果页面上其他脚本也给window.onload赋值，你的代码就会被覆盖掉。更稳妥的方式是用addEventListener：

window.addEventListener('load', function() {
    openRulesOverlay();
});

这样可以同时绑定多个load事件监听器，不会互相冲突。

如果上面的方法解决不了问题，那可能需要你提供HTML代码，我们再排查其他可能性，但90%的概率就是表单提交导致的页面刷新问题。

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