javascript - 如何在 Javascript 中删除 "mouseup"事件监听器

Question

在这里，我将一个元素拖放到另一个地方，如果我不使用事件监听器，它会很好地工作，但如果我以这种格式使用它，它就不会执行“放置”操作。

此链接包含我的代码“带有事件监听器” 访问http://jsfiddle.net/vishwateja2000/wHprQ/2/

此链接包含我的代码“没有事件监听器” 访问http://jsfiddle.net/vishwateja2000/W2Pgq/1/

document.getElementById("div2").addEventListener("mousedown", down);

function down(){
    t=1;
    document.getElementById("div1").addEventListener("mouseup", place);

    document.getElementById("div1").addEventListener("mousemove",function() {
        myFunction(event);
    });
}

function place(){ 
    document.getElementById("div1").removeEventListener("mousemove",function() {
         myFunction(event);
    });
}
function placeobj(x,y,x1,y1,l,r){
    var cpx = parseInt(x);
    var cpy = parseInt(y);
    var amtx=parseInt(x1);
    var amty=parseInt(y1);
    var of=10;
    document.getElementById("div2").style.left=cpx-amtx+l+"px";
    document.getElementById("div2").style.top=cpy-amty+r+"px";
}
function myFunction(e) {
    if(t==1){
        x1 = e.clientX;
        y1 = e.clientY;
        var el=document.getElementById('div2');
        l=el.offsetLeft;
        r=el.offsetTop;
        t=10;
    }
        x = e.clientX;
        y = e.clientY;
    placeobj(x,y,x1,y1,l,r);
}

Answer 1

问题是您在添加和删除 mousemove 事件时使用了不同的函数。 尽管它们具有相同的功能，但它们在内存中的功能不同，因此处理方式不同。

看一下修复后的版本: http://jsfiddle.net/PN3TA/

removeEventListener() 必须与 addEventListener() 中使用的事件名称和函数相同，才能删除正确的事件。该函数不能是匿名函数，因为它会创建一个新函数(尽管它可能看起来相同)。您需要使用可以是命名函数或变量的引用(如指针)。

注意:另外，当将函数传递给这些方法时，如果原始函数希望获得与匿名函数相同的参数，则您不必包装在匿名函数中。我的意思是，这个:

 document.getElementById("div1").addEventListener("mousemove",function() {
    myFunction(event);
});

可以这样写，因为 myFunction() 需要一个无论如何都会提供的 event 参数，从而为您节省了一个函数包装器:

document.getElementById("div1").addEventListener("mousemove",  myFunction);