Javascript 事件未从窗口中删除_Javascript_Event Handling

Javascript 事件未从窗口中删除

javascript

Javascript 事件未从窗口中删除,javascript,event-handling,Javascript,Event Handling,我很难将事件从窗口中移除，我无法找出它不起作用的原因。我有一个将事件添加到窗口的函数 Test.prototype.func1 = function(){ this.func2 = function(){ // do something }; window.addEventListener("event1", this.func2, true); }; 现在我有了一个exit函数（当我退出那个特定的选项卡时会调用它），在这里我调用detachEvent（

我很难将事件从窗口中移除，我无法找出它不起作用的原因。我有一个将事件添加到窗口的函数

Test.prototype.func1 = function(){
    this.func2 = function(){
      // do something
    };

    window.addEventListener("event1", this.func2, true);
};

现在我有了一个

exit

函数（当我退出那个特定的选项卡时会调用它），在这里我调用

detachEvent（）

，在这里我从窗口中删除我的事件

Test.prototype.exit = function(){
    this.detachEvent();
}

我的

detachEvent

函数是

Test.prototype.detachEvent() = function(){
    window.removeEventListener("event1", this.func2, true);
}

现在问题出现了，因为我的代码是一个更大项目的一部分，不知何故，

func1

被调用了两次。因此，

event1

被两次添加到窗口中。为了避免重复事件，我甚至在将事件添加到窗口之前尝试调用

detachEvent（）

Test.prototype.func1 = function(){
    this.func2 = function(){
      // do something
    }
    this.detachEvent();
    window.addEventListener("event1", this.func2, true);
}

但是，当从内部调用

detachEvent（）

时，该事件不会被删除，但当从退出（）调用

detachEvent（）

时，它会工作

我的代码适用于事件未添加两次的情况，但在这里它不起作用。

我无法找出原因，我们将非常感谢您提供的任何帮助。

如果您只希望添加一次事件，则需要设置一个标志以防止再次添加该事件。差不多

Test.prototype.func1 = function(){
  if (this._func2added) return;
  this._func2added = true;

  this.func2 = function(){
     // do something
  }

  window.addEventListener("event1", this.func2, true);
}

然后在分离时释放该事件上的标志。

如果只想添加一次事件，则需要设置标志以防止再次添加该事件。差不多

Test.prototype.func1 = function(){
  if (this._func2added) return;
  this._func2added = true;

  this.func2 = function(){
     // do something
  }

  window.addEventListener("event1", this.func2, true);
}

在您的分离中，释放上面的标志。

查看您的代码，我可以看到问题是“这个。func2”是在“Test.prototype.func1”中分配的，所以当您一次又一次调用函数“func1”时，它只是一次又一次地重新分配“func2”。解决此问题的最佳方法是

func1

Test.prototype.func1 = function(){
  this.detachEvent();
  window.addEventListener("event1", this.func2, true);
}

退出

Test.prototype.exit = function(){
       this.detachEvent();
}

Test.prototype.detachEvent = function(){
    window.removeEventListener("event1", this.func2, true);
}

detachEvent

Test.prototype.exit = function(){
       this.detachEvent();
}

Test.prototype.detachEvent = function(){
    window.removeEventListener("event1", this.func2, true);
}

func2

Test.prototype.func2 = function(){
     // do something
}

查看您的代码，我可以看到问题是“这个.func2”是在“Test.prototype.func1”中分配的，所以当您一次又一次地调用函数“func1”时，它只是一次又一次地重新分配“func2”。解决此问题的最佳方法是

func1

Test.prototype.func1 = function(){
  this.detachEvent();
  window.addEventListener("event1", this.func2, true);
}

退出

Test.prototype.exit = function(){
       this.detachEvent();
}

Test.prototype.detachEvent = function(){
    window.removeEventListener("event1", this.func2, true);
}

detachEvent

Test.prototype.exit = function(){
       this.detachEvent();
}

Test.prototype.detachEvent = function(){
    window.removeEventListener("event1", this.func2, true);
}

func2

Test.prototype.func2 = function(){
     // do something
}

将侦听器更改为您的操作：

旧的：

使用此选项更好：

youobject.event1 = function {
    //you code here
}

这会自动清除并设置侦听器。

将侦听器更改为您的操作：

旧的：

使用此选项更好：

youobject.event1 = function {
    //you code here
}

这会自动清除并设置侦听器。

您需要删除旧的

func2

处理程序。在从

func1

调用

detachEvent

时，您已经覆盖了它，因此它会尝试删除从未安装过的函数，而不会影响事件处理程序

Test.prototype.func1 = function() {
  this.detachEvent(); // move here!
  this.func2 = function(){ … };
  window.addEventListener("event1", this.func2, true);
}

或者，不要在

func1

中指定

func2

，而是在构造函数中初始化属性一次（甚至将其作为原型方法）。这样，

addEventListener

甚至不会两次注册同一个函数。