Javascript 当某个函数运行时删除EventListener

我有以下代码：

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

function myValidation() {
 // do some checks
 // if checks passed, 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", function(e){
     (e || window.event).returnValue = setEvents();           
   }, false);

});

说明：

上面的代码调用了

setEvent（）

函数，该函数从内部调用

myValidation（）

函数

另外，我还有一个代码，

beforeunload

，用于在用户关闭浏览器时运行相同的功能。这仅在单击某个输入时发生

但是，我希望

myValidation（）

在卸载之前不要运行此

因此，换句话说，我希望浏览器总是在卸载前运行
beforeunload
，但是当调用/使用
myValidation（）
时，应该删除卸载前的
beforeunload

因此，为了实现这一点，这就是我所尝试的：

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

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

setEvents();

$( "#edit-submitted-name-consolidation" ).click(function() {
   window.addEventListener("beforeunload", function(e){
     (e || window.event).returnValue = setEvents();           
   }, false);
});

因此，我添加了
window.removeEventListener（“beforeunload”，e））在
myValidation（）
中。然而，这对我不起作用

因此，我可以问一下，如果使用
myValidation（）
，我如何在卸载之前删除
。
问题是，您应该将处理程序提取到一个变量中，因为这是两个独立的函数，您必须对原始函数进行引用，您不能像这样删除侦听器

您现在正在做的是删除一个不存在的事件侦听器

const handler = function(e){
  (e || window.event).returnValue = setEvents();           
}

window.addEventListener("beforeunload", handler, false);
window.removeEventListener("beforeunload", handler);

如需进一步解释，请尝试此=>

const x = () => {}
const y = () => {}

console.log(x === y) // should be true right? wrong. functions are compared by reference.
console.log(x === x) // this is true, since the reference is the same

问题是，您应该将处理程序提取到一个变量中，因为这是两个独立的函数，您必须有一个对原始函数的引用，您不能像这样删除侦听器

您现在正在做的是删除一个不存在的事件侦听器

const handler = function(e){
  (e || window.event).returnValue = setEvents();           
}

window.addEventListener("beforeunload", handler, false);
window.removeEventListener("beforeunload", handler);

如需进一步解释，请尝试此=>

const x = () => {}
const y = () => {}

console.log(x === y) // should be true right? wrong. functions are compared by reference.
console.log(x === x) // this is true, since the reference is the same

您需要一个引用才能使用
removeEventListener
。是的，在我的问题中，您可以在我尝试的下，在
myValidation（）
窗口中看到。removeEventListener（“beforeunload”，（e））但它不起作用我不确定我写
window.removeEventListener（“beforeunload”，e）的方式是否正确是正确的。它不是。您解除绑定的是一个匿名的空函数。完全不相关。您需要一个引用才能使用
removeEventListener
。是的，在我的问题中，您可以在我尝试的下看到，在
myValidation（）
中，我确实运行了此代码
窗口。removeEventListener（“beforeunload”，（e））但它不起作用我不确定我写
window.removeEventListener（“beforeunload”，e）的方式是否正确是正确的。它不是。您解除绑定的是一个匿名的空函数。完全不相干，我不知道结果。我将addEvent放在beforeunload所在的位置，并将removeAddevent放在myValidation（）中，但它对我不起作用。当重定向到创建URL参数时，它仍然会创建一个弹出窗口。无论您将其放置在何处，关键是，您在AddEventLister中定义了回调，并单独移除了EventLister，如果不这样做，那么您的代码会有其他问题。这绝对是你添加可移动侦听器的方式。抱歉，我仍在尝试，将相应更新。我尝试将addlistener放入onclick事件，并在myValidation上尝试删除它，但它不起作用。所以我会检查我的代码，看看我是否犯了错误。@DanielTok我现在明白了。我试着看了看你的代码，是的，你是对的，基本上我在click函数中设置了const处理程序，所以我弄错了。我把它当作一个全局变量，然后调用add或remove事件，现在它可以工作了。非常感谢你！我没有得到结果。我将addEvent放在beforeunload所在的位置，并将removeAddevent放在myValidation（）中，但它对我不起作用。当重定向到创建URL参数时，它仍然会创建一个弹出窗口。无论您将其放置在何处，关键是，您在AddEventLister中定义了回调，并单独移除了EventLister，如果不这样做，那么您的代码会有其他问题。这绝对是你添加可移动侦听器的方式。抱歉，我仍在尝试，将相应更新。我尝试将addlistener放入onclick事件，并在myValidation上尝试删除它，但它不起作用。所以我会检查我的代码，看看我是否犯了错误。@DanielTok我现在明白了。我试着看了看你的代码，是的，你是对的，基本上我在click函数中设置了const处理程序，所以我弄错了。我把它当作一个全局变量，然后调用add或remove事件，现在它可以工作了。非常感谢你！