удаление обработчиков событий не работает: «этот» контекст потерян в javascript?

Question

У меня есть проблема с удалением eventhandlers для ползунка элемента

Если я не использую прокси-сервер для обработчика, то «это» будет указывать на йот элемент

Как удалить обработчик?

соответствующий код

var slider = (function (slider) { 


var Sliderhandle = function(handle){ 
    EvtTarget.call(this); 

    this.events = { 
     start: ['touchstart', 'mousedown'], 
     move: ['touchmove', 'mousemove'], 
     end: ['touchend', 'touchcancel', 'mouseup'] 
    }; 

    this.options = {}; 
    this.element = $$('div.ui-slider'); 
    // set context for event handlers 
    this.start = this.start.bind(this); 
    this.move = this.move.bind(this); 
    this.end = this.end.bind(this); 

    this.proxy = function(func){ 
     var that = this; 
     return(function(){ 
     return func.apply(that,arguments); 
     }); 
    } 

    Object.defineProperty(this, "__el",{ 
     value:handle 
    }); 

}; 


    Sliderhandle.prototype = Object.create(EvtTarget.prototype,{ 
     init : { 
      value:function(config){ 



       this.container = $$('div.ui-slider');                  
       this.track = this.container.getElementsByClassName('ui-slider-track')[0]; 

       this.value = (config && config.value) || 1; 
       this.min = (config && config.min) || 1; 
       this.max = (config && config.value) || 1000; 
       this.change = (config && config.change) || null; // callback 

       this.addEvents("start"); 
       this.setValue(this.value); 

      }, 
      enumerable:true 
     }, 

     addEvents : { 
      value:function(name){ 
       var list = this.events[name], 
        handler = this[name], 
        all; 
       handler = this.proxy(handler); 
       for (all in list){ 
        this.container.addEventListener(list[all], handler, false); 
       }  
      }, 
      enumerable:true 
     }, 
     removeEvents:{ 
      value:function(name){ 
       var list = this.events[name], 
        handler = this[name], 
        all; 
       //handler = this.proxy(handler); 
       for (all in list){ 
        this.container.removeEventListener(list[all], handler, false); 
       } 
      }, 
      enumerable:true 
     }, 

спасибо

Answer 1

Проблема в том, что нет прослушивателя событий же с handler, который проходил в removeEventListener. this.proxy() генерирует новую функцию для каждого вызова. Он возвращает целый объект функции, даже если вы вызываете его с тем же параметром, хотя возвращаемая функция будет выполнять семантически то же самое задание.

Вы должны хранить прокси-функции, когда добавить, а затем использовать это один, когда удалить так:

var Sliderhandle = function(handle){ 
    // .... 
    this.proxyHandler = {}; 
} 

// .... 

addEvents : { 
    value: function(name){ 
     var list = this.events[name], 
      handler = this[name], 
      all; 
     this.proxyHandler[name] = handler = this.proxy(handler); 
     for (all in list){ 
      this.container.addEventListener(list[all], handler, false); 
     }  
    }, 
    enumerable:true 
}, 
removeEvents:{ 
    value:function(name){ 
     var list = this.events[name], 
      handler = this.proxyHandler[name], 
      all; 
     for (all in list){ 
      this.container.removeEventListener(list[all], handler, false); 
     } 
     delete this.proxyHandler[name]; 
    }, 
    enumerable:true 
},