Удаление прослушивателей событий с анонимными вызовами функций в JavaScript

Question

Я пытаюсь удалить прослушиватель событий для созданных элементов span, где вызванная функция находится в закрытии. Я пробовал различные методы, и никто не работает.

var MyClass = function() {} 

MyClass.prototype.addSpan = function (el) { 
    var span = document.createElement('span'); 
    span.innerHTML = "Text here"; 
    el.appendChild(span); 
    span.addEventListener('click', (function (obj) { 
     return function() { 
      obj.removeSpan(); 
     } 
    })(this), false); 
} 

MyClass.prototype.removeSpan = function() { 
    alert('removing span'); 
    this.removeEventListener('click', arguments.callee, false); 
    // .... remove span .... 
} 

myclass = new MyClass(); 

myclass.addSpan(document.getElementById('box')); 

Я также использовал

this.removeEventListener('click', (function (obj) { 
    return function() { 
     obj.removeSpan(); 
    } 
})(this), false); 

вместо this.removeEventListener('click', arguments.callee, false);, но не везло.

Любая помощь очень ценится!

Answer 1

var MyClass = function() {} 
MyClass.prototype.listener=null; 
MyClass.prototype.addSpan = function (el) { 
    var span = document.createElement('span'); 
    span.innerHTML = "Text here"; 
    el.appendChild(span); 
    span.addEventListener('click', (function (obj) { 
     return obj.listener = function() { 
      obj.removeSpan(this); // here 'this' refers to 'span' 
     } 
    })(this), false); 
} 

MyClass.prototype.removeSpan = function (el) { 
    alert('removing span'); 
    el.removeEventListener('click', this.listener, false); 
    // .... remove span .... 
} 

myclass = new MyClass(); 
myclass.addSpan(document.getElementById('box')); 

Без ссылки слушателя вы не можете удалить его, таким образом, я также добавил свойство (слушателя) к прототипу MyClass', а затем возвратил ссылку в return obj.listener, а также вам нужно передать объект, как я прошел его obj.removeSpan(this);, и в removeSpan Я получил с el, чтобы я мог сделать el.removeEventListener, надеюсь, что это поможет.

Вы также можете сделать это

var MyClass = function() {this.listener=null;} 

вместо

MyClass.prototype.listener=null; 

Вот example.

Answer 2

Попробуйте изменить обработчик событий на это.

span.addEventListener('click', (function (obj) { 

     span.onclick = null; 

     return function() { 
      obj.removeSpan(); 
     } 
    })(this), false);