刪除eventhandlers不工作：「this」上下文在javascript中丟失？

Question

我有移除事件處理的滑動部件

如果我不使用代理服務器的處理程序中，「這個」將指向DOM元素

如何刪除處理程序有問題？

相關代碼

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 
},