無法使用javascript刪除事件偵聽器

Question

請告訴我，為什么removeEvent不起作用，並在調用removeEventListener后單擊body工作。 我只是讓它變得更加簡單，以便更好地理解
p - 我的對象有屬性和方法;
p.is_open - 真/假屬性;
p.switcher - DOM元素;

function MyClassname(){
  .......
  p.switcher.onclick = function(e){
    if(p.is_open){
      p.close();
      document.body.removeEventListener('click', p.close.bind(p));
    }else{
      p.open();
      document.body.addEventListener('click', p.close.bind(p));
    };
    e.stopPropagation();
  };
  .......
};
.......
MyClassname.prototype.close = function(){
  var p = this;
  p.is_open = false;
  p.switcher.className = 'closed';
};
MyClassname.prototype.open = function(){
  var p = this;
  p.is_open = true;
  p.switcher.className = 'open';
};

我可以用另一種方式解決這個問題，但我想解決這個問題。 謝謝。

Answer 1

您無法刪除事件偵聽器，因為您必須將p.close.bind(p)存儲在變量中。
像這樣的東西：

function MyClassname(){
  var closeHandler = p.close.bind(p);
  .......
  p.switcher.onclick = function(e){
    if(p.is_open){
      p.close();
      document.body.removeEventListener('click', closeHandler);
    }else{
      p.open();
      document.body.addEventListener('click', closeHandler);
    };
    e.stopPropagation();
  };
  .......
};
.......
MyClassname.prototype.close = function(){
  var p = this;
  p.is_open = false;
  p.switcher.className = 'closed';
};
MyClassname.prototype.open = function(){
  var p = this;
  p.is_open = true;
  p.switcher.className = 'open';
};

位p.close.bind(p)創建一個具有相同主體的新函數。
這是一個全新的對象。 並且比較2個不同的對象返回false 。

部分引用MDB關於.bind()方法 ：

bind()方法創建一個新函數，在調用時，將其this關鍵字設置為提供的值[...]。

---

這是一個例子：

 var button = document.getElementsByTagName('button')[0]; var handler = function(){ console.log('click'); //this refers to the button this.removeEventListener('click', handler.bind(this)); }; button.addEventListener('click', handler.bind(button)); 

 <button>Click me</button> 

如您所見，點擊停留在那里。 這是另一個例子：

 var button = document.getElementsByTagName('button')[0]; var handler = (function(){ console.log('click'); //this refers to the button this.removeEventListener('click', handler); }).bind(button); button.addEventListener('click', handler); 

 <button>Click me</button> 

將.bind()的結果存儲在變量中允許您按照自己的意願進行操作，並且您正在引用相同的對象。