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

我试图删除这个事件监听器，但我不能，因为我在事件监听器的回调函数中使用了函数参数键，我试过这个，但它没有＆＃39;工作：

 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);

我应该怎么做才能删除鼠标移动＆＃39;事件监听器

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

使用另一个函数的参数删除具有回调函数的事件侦听器

1 个答案: