删除具有带有另一个函数参数的回调函数的事件侦听器[重复]答案

【问题标题】：Remove event listener that has callback function with parameters of another function [duplicate]删除具有带有另一个函数参数的回调函数的事件侦听器[重复]
【发布时间】：2017-04-27 20:42:54
【问题描述】：

我像这样添加了一个事件监听器：

 function position(key){
     canvas.addEventListener("mousemove", function(evt){
     var mousePos = getMousePos(canvas, evt);
     document.getElementById("demox["+key+"]").value =mousePos.x;
     document.getElementById("demoy["+key+"]").value =mousePos.y;
     }, true);
 }

我正在尝试删除此事件侦听器，但无法删除，因为我在事件侦听器的回调函数中使用了函数参数键，我尝试了此操作，但没有成功：

 function myFunction(evt){
     var mousePos = getMousePos(canvas, evt);
     document.getElementById("demox["+key+"]").value =mousePos.x;
     document.getElementById("demoy["+key+"]").value =mousePos.y;
 }
 canvas.removeEventListener('mousemove', myFunction, true);

我应该怎么做才能删除“mousemove”事件监听器

【问题讨论】：

您只能删除命名函数。因此，除非您添加它 canvas.addEventListener("mousemove", myFunction)，否则您将无法使用 removeEventListener 将其删除。

标签： javascript

【解决方案1】：

您无法删除事件侦听器的原因不是key 参数本身。这是因为mousemove 事件处理程序是一个匿名函数。如果要注册的函数是匿名的，则永远无法从其自身外部取消注册，因为它没有可供您引用的标识符。

您需要更改为使用命名函数声明，以便稍后可以正确引用该函数并通过更高范围的变量获得key 变量：

 var key = null;

 function position(val){
     key = val;
     canvas.addEventListener("mousemove", mouseHandler , true);
 }

 function mouseHandler (evt){
     var mousePos = getMousePos(canvas, evt);
     document.getElementById("demox[" + key + "]").value =mousePos.x;
     document.getElementById("demoy[" + key + "]").value =mousePos.y;
 }

【讨论】：