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

JavaScript removeEventListener不起作用

1 个答案: