に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" 
    }); 
    } 
    }