Question

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

此链接包含我的代码“with Event Listeners” 访问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);

Answer 2

您要附加一个带有对函数的引用的事件，然后您可以使用相同的引用来删除该侦听器。您无法使用removeEventListener()删除匿名事件处理程序。

附上参考：

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

删除参考：

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

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

Answer 3

不要使用嵌入式事件功能。已命名事件功能。例如：

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：）

如何在Javascript中删除“mouseup”事件侦听器

3 个答案: