removeEventListener，如何做到這一點在特殊情況下

Question

我有這樣的代碼：

grabbale.addEventListener("leap-hand-grab", function(e){ 
if (e.state === "grab") { 
      console.log("grabbed"); 
} else if (e.state === "release") { 
      console.log("release"); 
} else if (e.state === "move") { 
    if (stopGrab == 0) { 
     grabbale.style.left = e.x - (grabbale.offsetWidth/2)+ "px"; 
     grabbale.style.top = e.y - (grabbale.offsetHeight/2)+ "px"; 
    } else { 
     $("#foo").css({ 
     "color": "red" 
     }); 
    } 
} 

}）

什麼，我需要的是刪除使用removeEventListener事件監聽，但它需要兩個參數， 事件和函數。 在我的情況下功能沒有一個名字，而事件是grabbale元素的阻力 ... 我該怎麼辦我需要什麼？

Answer 1

那麼你可以使用一個命名函數，這是相同的事情，只有匿名函數現在有一個名稱。

grabbale.addEventListener("leap-hand-grab", grabListener); 

function grabListener(e){ 
    if (e.state === "grab") { 
     console.log("grabbed"); 
    } else if (e.state === "release") { 
     console.log("release"); 
    } else if (e.state === "move") { 
     if (stopGrab == 0) { 
      grabbale.style.left = e.x - (grabbale.offsetWidth/2)+ "px"; 
      grabbale.style.top = e.y - (grabbale.offsetHeight/2)+ "px"; 
    } else { 
     $("#foo").css({ 
     "color": "red" 
     }); 
    } 
} 

而對於去除只使用

grabbale.removeEventListener("leap-hand-grab", grabListener); 

，你需要刪除的事件。

一些額外的鏈接：

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function#Named_function_expression

Answer 2

grabbale.addEventListener("leap-hand-grab", react); 
function react(e){ 
    if (e.state === "grab") { 
     console.log("grabbed"); 
    } else if (e.state === "release") { 
     console.log("release"); 
    } else if (e.state === "move") { 
    if (stopGrab == 0) { 
    grabbale.style.left = e.x - (grabbale.offsetWidth/2)+ "px"; 
    grabbale.style.top = e.y - (grabbale.offsetHeight/2)+ "px"; 
    grabbale.removeEventListener("leap-hand-grab",react); 
} else { 
    $("#foo").css({ 
    "color": "red" 
    }); 
    } 
    }