JavaScript removeEventListener將不起作用

Question

我有一個簡單的拖放腳本，我正在玩弄學習..要嘗試代碼，只需在頁面上使用id爲「TEST」的元素並將腳本放置在頁。

元素將開始拖動，並且當您向上滑動時，它看起來像removeEventListener似乎不工作。我一直在搞2個小時，請幫忙！有沒有明顯的原因，它不起作用？這裏是腳本：

var Example = function() { 
var exa = this; 
this.elem = null; 

    this.init = function() { 
     exa.elem = document.getElementById('TEST'); 
     console.log('exa.init()'); 
     exa.attachEvent(exa.elem, 'mousedown', function(event) { 
      console.log('mousedown'); 
      exa.drag.anchor(event); 
     }); 

    } 
    this.attachEvent = function (object, event, handler) { 
      if (window.attachEvent) { 
        object.attachEvent('on'+event, function() { 
        handler.apply(object, arguments); 
       }, false); 
      } else { 
       object.addEventListener(event, function() { 
       handler.apply(object, arguments); 
       }, false); 
      } 
     } 
     this.detachEvent = function(object, event, handler){ 
      if (window.detachEvent) { 
       object.detachEvent('on'+event, function(){ 
        handler.apply(object, arguments); 
       }, false) ; 
      } else { 
        object.removeEventListener(event, function() { 
         handler.apply(object, arguments); 
        }, false); 
      } 
     } 

    this.drag = { 
     'release' : function(event) { 
      exa.elem.removeEventListener('mousemove', function(event) { exa.drag.move(event) }, true); 
      console.log('drag.release2'); 
     }, 
     'anchor' : function(event){ 
      console.log('exa.drag.anchor();'); 
      offY= event.clientY-parseInt(exa.elem.offsetTop); 
      offX= event.clientX-parseInt(exa.elem.offsetLeft); 
      exa.attachEvent(window, 'mousemove', function(event) { 
        exa.drag.move(event); 
      }); 
     }, 
     'move' : function(event) { 
      exa.elem.style.position = 'absolute'; 
      var topPosition = (event.clientY-offY); 
      var leftPosition = (event.clientX-offX); 
      exa.elem.style.top = topPosition+ 'px'; 
      exa.elem.style.left = leftPosition + 'px'; 
      //console.log('FROM THE TOP: ' + topPosition); 
      //console.log('FROM THE LEFT: ' + leftPosition); 
      exa.attachEvent(window, 'mouseup', function(event) { 
        exa.drag.release(event); 
      }); 
     } 
    } 

} 


var example = new Example(); 
example.attachEvent(window, 'load', function(event) { 
    example.init(event); 
}); 

---

我們對此深感抱歉，我發佈的代碼已經爲功能和一對夫婦的錯誤混淆的名字，請看下面的例子：

var Example = function() { 
var exa = this; 
this.elem = null; 

    this.init = function() { 
     exa.elem = document.getElementById('TEST'); 
     console.log('exa.init()'); 
     exa.newEvent(exa.elem, 'mousedown', function(event) { 
      console.log('mousedown'); 
      exa.drag.anchor(event); 
     }); 

    } 
    this.newEvent = function (object, event, handler) { 
      if (window.attachEvent) { 
        object.attachEvent('on'+event, function() { 
        handler.apply(object, arguments); 
       }, false); 
      } else { 
       object.addEventListener(event, function() { 
       handler.apply(object, arguments); 
       }, false); 
      } 
     } 
     this.removeEvent = function(object, event, handler){ 
      if (window.detachEvent) { 
       object.detachEvent('on'+event, function(){ 
        handler.apply(object, arguments); 
       }, false) ; 
      } else { 
        object.removeEventListener(event, function() { 
         handler.apply(object, arguments); 
        }, false); 
      } 
     } 


    this.drag = { 
     'release' : function(event) { 
      exa.removeEvent(exa.elem, 'mousemove', exa.drag.move); 
      console.log('drag.release2'); 
     }, 
     'anchor' : function(event){ 
      console.log('exa.drag.anchor();'); 
      offY= event.clientY-parseInt(exa.elem.offsetTop); 
      offX= event.clientX-parseInt(exa.elem.offsetLeft); 
      exa.newEvent(window, 'mousemove', function(event) { 
        exa.drag.move(event); 
      }); 
     }, 
     'move' : function(event) { 
      exa.elem.style.position = 'absolute'; 
      var topPosition = (event.clientY-offY); 
      var leftPosition = (event.clientX-offX); 
      exa.elem.style.top = topPosition+ 'px'; 
      exa.elem.style.left = leftPosition + 'px'; 
      exa.newEvent(window, 'mouseup', function(event) { 
        exa.drag.release(event); 
      }); 
     } 
    } 

} 


var example = new Example(); 
example.newEvent(window, 'load', function(event) { 
    example.init(event); 
}); 

Answer 1

你需要一個引用第一個函數的變量（回調函數傳遞給addEventListener），每次當您將body函數作爲參數傳遞給removeEventListener時，都會創建新函數

var callback = function() 
{ 
    alert(1); 
} 

button.addEventListener('click', callback); 
button.removeEventListener('click', callback);