javascriptを使用してイベントリスナーを削除することはできません

Question

removeEventが機能しない理由を教えてください。removeEventListenerが呼び出された後でbodyをクリックしてください。私はそれをより分かりやすくするために単純にします。
p - プロパティとメソッドを持つオブジェクト。
p.is_open - true/falseプロパティ。
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が返されます。

一部MDNを引用

についてthe .bind() method：

bind()メソッドが呼び出され、新しい関数を作成し、[...]提供された値に設定され、このキーワードがあります。

---

ここでは例です：

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>

あなたが見ることができるように、クリックが残ります。ここでもう一つの例だ：変数内.bind()の結果を保存する

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>

は、あなたが望むようにあなたが行うことができます、そしてあなたは、まったく同じオブジェクトを参照のうえされています。