如何在调用myValidation()时移除beforeunload事件监听器？

你遇到的问题核心在于：匿名函数无法被removeEventListener正确识别。当你用匿名函数绑定beforeunload事件时，浏览器无法追踪到这个函数的引用，后续调用removeEventListener自然找不到要移除的目标，所以没有效果。

解决方法很简单——把事件处理逻辑抽成命名函数，这样添加和移除事件时使用同一个函数引用即可。下面是修改后的完整代码：

// 抽离命名的beforeunload处理函数
function handleBeforeUnload(e) {
  (e || window.event).returnValue = setEvents();
}

function setEvents() { 
  // do some code 
  myValidation(); 
} 

function myValidation() { 
  // do some checks 
  // if checks passed, then remove the event listener first
  window.removeEventListener("beforeunload", handleBeforeUnload, false);
  // then set the values to URL parameters 
  window.location.replace(window.location.href + "?myName=" + capture_name); 
} 

setEvents(); 

// 绑定事件时使用命名函数
$( "#edit-submitted-name-consolidation" ).click(function() { 
  window.addEventListener("beforeunload", handleBeforeUnload, false); 
});

关键注意事项： #

• 调用removeEventListener时，三个参数（事件名称、函数引用、useCapture布尔值）必须和addEventListener完全一致，这里useCapture都是false，要对应上。
• 如果你后续需要重新绑定该事件（比如用户再次点击输入框），可以直接重复调用addEventListener——重复绑定同一个函数只会生效一次，不会产生重复触发的问题。
• 部分现代浏览器对beforeunload的returnValue处理有规范限制，但你的原有逻辑可以正常保留。

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