javascript - 删除具有带有另一个函数参数的回调函数的事件监听器

Question

我添加了一个事件监听器，如下所示:

 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”事件监听器

Answer 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;
 }