JavaScript removeEventListener不能工作

Question

我有一个简单的拖放脚本来学习。要尝试代码，只需在页面上使用id "TEST“的元素并将脚本放在页面上即可。

元素将开始拖动，当您鼠标向上移动时，removeEventListener似乎无法工作。我已经搞了两个小时了，请帮帮忙！有什么明显的原因不起作用吗？下面是脚本：

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);