事件未從窗口中刪除

Question

我很難從窗口中刪除事件，但我無法弄清楚為什么它不起作用。 我有一個向窗口添加事件的功能。

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

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

現在，我有一個exit函數（當我退出該特定選項卡時會被調用），從那里我調用detachEvent() ，在該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);
}

但是當從func1()內部調用detachEvent()時，該事件不會被刪除，但是當從exit（）中調用detachEvent()時，該事件將起作用。

我的代碼在事件未添加兩次但此處無法正常工作的情況下起作用。 我無法弄清原因，我們將不勝感激。

Answer 1

查看您的代碼，我可以看到問題是在test.prototype.func1中分配了this.func2，因此，當您一次又一次調用函數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

您需要刪除舊的func2處理程序。 從func1調用detachEvent時，您已經覆蓋了它，因此它嘗試刪除一個從未安裝的函數，而不會影響事件處理程序。

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

另外，不要在func1內部分配func2 ，而是在構造函數中初始化屬性一次（甚至使其成為原型方法）。 這樣， addEventListener甚至不會兩次注冊相同的函數。

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
}

這會自動清除並設置偵聽器。