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

Question

我有以下代码：

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.

所以换句话说，我希望浏览器总是运行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(). 但是，这对我不起作用。

所以我可以问，beforeunload如果myValidation()正在使用，我如何删除？

Answer 1

问题是你应该将处理程序提取到一个变量中，因为这是两个独立的函数，你必须有一个对原始函数的引用，你不能像这样删除监听器。您现在正在做的是删除不存在的事件侦听器。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