如何在 JavaScript 中移除一个 "mouseup" 事件监听器

Question

我拖动并将一个元素放置在另一个地方，如果我不使用事件监听器，它能够正常工作，但是如果我以这种格式使用它，则无法执行“place”操作。

此链接包含我的代码“使用事件监听器” 访问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);
}

- JVT

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

- Lior

---

@JVT 如果你认为这个答案有帮助，也可以给它点赞。 :) - Lior

Answer 2

不要使用嵌入式的事件函数。使用命名事件函数。例如：

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

myFunction(event){
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);
}

现在您可以像这样轻松地删除事件：

document.getElementById("div1").removeEventListener("mouseup", myFunction);

我也建议使用jQuery :)

- Martin Sonesson

Answer 3

你必须将事件与函数引用绑定，然后可以使用相同的引用来移除侦听器。你不能使用 removeEventListener() 移除匿名事件处理程序。

使用引用附加：

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

通过引用删除：

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

请注意，e会自动传递给处理程序，您无需手动传递。

- Teemu