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