无法使用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()的结果存储在变量中允许您按照自己的意愿进行操作，并且您正在引用相同的对象。