Question

我很难从窗口删除事件，但我无法弄清楚它为什么不起作用。我有一个函数，我在窗口中添加一个事件。

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()内部调用func1()时，事件不会被删除，但是当从exit（）调用detachEvent()时它正在工作。

我的代码适用于未添加两次事件但在此处无效的情况。我无法弄清楚原因，任何帮助将不胜感激。

Answer 1

查看你的代码我可以看到问题是' this.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(); }

<强> detachEvent

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

<强> FUNC2

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

Answer 2

您需要删除旧的detachEvent处理程序。当您从func1调用Test.prototype.func1 = function() { this.detachEvent(); // move here! this.func2 = function(){ … }; window.addEventListener("event1", this.func2, true); }时，您已经覆盖了它，因此它会尝试删除一个从未安装的函数，而不会影响事件处理程序。

func2

或者，不要在func1内分配addEventListener，而是在构造函数中初始化属性一次（或者甚至使其成为原型方法）。这样，dt.loc[dt['Frequency']=='0','Date']=dt['Time Period']+'01-01' dt: Frequency,Time Period,Date 0,2008 0,1961 2,2015Q1 3,2016M1甚至不会两次注册相同的函数。

Answer 3

如果您只希望一次添加事件，则需要设置一个标志以防止再次添加该事件。像。的东西。

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

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

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

在你的分离上释放了旗帜。

Answer 4

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

旧：

youobject.addeventListener('something',unknownfunction);

使用这个更好：

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

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

事件没有从窗口中删除

4 个答案: