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 的eventListener，但它需要两个参数，事件和函数。 在我的情况下，函数没有名称，事件是 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"
    });
    }
  }