Javascript removeEventListener无法正常工作

Question

Javascript removeEventListener无法正常工作

我有以下代码来添加eventListener

 area.addEventListener('click',function(event) {
              app.addSpot(event.clientX,event.clientY);
              app.addFlag = 1;
          },true);

它正如预期的那样正常工作。后来我尝试使用以下代码删除事件监听器

 area.removeEventListener('click',function(event) {
              app.addSpot(event.clientX,event.clientY);
              app.addFlag = 1;
          },true);

但是偶数监听器没有被移除。为什么会发生这种情况？我的removeEventListener（）有什么问题吗？注意：这里的区域类似于document.getElementById（'myId'）

Answer 1

这是因为两个匿名函数是完全不同的函数。您removeEventListener的参数不是对先前附加的函数对象的引用。function foo(event) {               app.addSpot(event.clientX,event.clientY);               app.addFlag = 1;           }  area.addEventListener('click',foo,true);  area.removeEventListener('click',foo,true);

Answer 2

您在两个调用中都创建了两个不同的函数。因此第二个函数与第一个函数没有任何关系，并且引擎能够删除该函数。请改为使用该功能的通用标识符。var handler = function(event) {               app.addSpot(event.clientX,event.clientY);               app.addFlag = 1;           };area.addEventListener('click', handler,true);之后你可以通过调用删除处理程序area.removeEventListener('click', handler,true);

Answer 3

如果要将局部变量传递给事件侦听器调用的函数，可以在函数内部定义函数（以获取局部变量）并在函数本身中传递函数的名称。例如，让我们从使用app作为局部变量添加事件监听器的函数内部开始。你会在这个函数里写一个函数，比如function yourFunction () {     var app;     function waitListen () {         waitExecute(app, waitListen);     }     area.addEventListener('click', waitListen, true);}然后，当调用waitExecute时，您需要删除它。function waitExecute (app, waitListen) {     ... // other code     area.removeEventListener('click', waitListen, true);}