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

时间:2017-04-27 20:42:55

标签: javascript

我添加了一个类似的事件监听器:

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

我应该怎么做才能删除鼠标移动'事件监听器

1 个答案:

答案 0 :(得分:0)

您无法删除事件侦听器的原因不是因为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;
 }