如何在Java Script中刪除“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);

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代替:)