如何删除 JavaScript 事件侦听器？

如果 @Cybernate 的解决方案不起作用，请尝试将触发器分解到它自己的函数中，以便您可以引用它。

clickHandler = function(event){
  if (click++ == 49)
    canvas.removeEventListener('click',clickHandler);
}
canvas.addEventListener('click',clickHandler);

您需要使用命名函数。

此外，变量需要位于处理程序之外才能递增。click

var click_count = 0;

function myClick(event) {
    click_count++;
    if(click_count == 50) {
       // to remove
       canvas.removeEventListener('click', myClick);
    }
}

// to add
canvas.addEventListener('click', myClick);

---

您可以像这样关闭变量：click_counter

var myClick = (function( click_count ) {
    var handler = function(event) {
        click_count++;
        if(click_count == 50) {
           // to remove
           canvas.removeEventListener('click', handler);
        }
    };
    return handler;
})( 0 );

// to add
canvas.addEventListener('click', myClick);

这样，就可以在多个元素之间递增计数器。

---

如果您不希望这样做，并且希望每个计数器都有自己的计数器，请执行以下操作：

var myClick = function( click_count ) {
    var handler = function(event) {
        click_count++;
        if(click_count == 50) {
           // to remove
           canvas.removeEventListener('click', handler);
        }
    };
    return handler;
};

// to add
canvas.addEventListener('click', myClick( 0 ));

我认为您可能需要提前定义处理程序函数，如下所示：

var myHandler = function(event) {
    click++; 
    if(click == 50) { 
        this.removeEventListener('click', myHandler);
    } 
}
canvas.addEventListener('click', myHandler);

这将允许您从处理程序本身内部按名称删除处理程序。

   canvas.addEventListener('click', function(event) {
      click++;
      if(click == 50) {
          this.removeEventListener('click',arguments.callee,false);
      }

应该这样做。

element.querySelector('.addDoor').onEvent('click', function (e) { });
element.querySelector('.addDoor').removeListeners();


HTMLElement.prototype.onEvent = function (eventType, callBack, useCapture) {
this.addEventListener(eventType, callBack, useCapture);
if (!this.myListeners) {
    this.myListeners = [];
};
this.myListeners.push({ eType: eventType, callBack: callBack });
return this;
};


HTMLElement.prototype.removeListeners = function () {
if (this.myListeners) {
    for (var i = 0; i < this.myListeners.length; i++) {
        this.removeEventListener(this.myListeners[i].eType, this.myListeners[i].callBack);
    };
   delete this.myListeners;
};
};

您可以使用命名函数表达式（在本例中为函数命名），如下所示：abc

let click = 0;
canvas.addEventListener('click', function abc(event) {
    click++;
    if (click >= 50) {
        // remove event listener function `abc`
        canvas.removeEventListener('click', abc);
    }
    // More code here ...
}

快速而肮脏的工作示例：http://jsfiddle.net/8qvdmLz5/2/。

有关命名函数表达式的详细信息：http://kangax.github.io/nfe/。

如果有人使用jquery，他可以这样做：

var click_count = 0;
$( "canvas" ).bind( "click", function( event ) {
    //do whatever you want
    click_count++;
    if ( click_count == 50 ) {
        //remove the event
        $( this ).unbind( event );
    }
});

希望它能帮助到某人。 请注意，@user113716给出的答案效果很好:)

试试这个，它对我有用。

<button id="btn">Click</button>
<script>
 console.log(btn)
 let f;
 btn.addEventListener('click', f=function(event) {
 console.log('Click')
 console.log(f)
 this.removeEventListener('click',f)
 console.log('Event removed')
})  
</script>

看起来没有人涵盖当前 JavaScript DOM 规范的一部分，该规范为您提供了一种在不使用 .如果我们看一下 https://dom.spec.whatwg.org/#concept-event-listener 我们会发现有许多属性可以传递来控制事件侦听：removeEventListener

{
  type (a string)
  callback (null or an EventListener object)
  capture (a boolean, initially false)
  passive (a boolean, initially false)
  once (a boolean, initially false)
  signal (null or an AbortSignal object)
  removed (a boolean for bookkeeping purposes, initially false) 
}

现在，该列表中有很多有用的属性，但为了删除事件侦听器，它是我们想要使用的属性（在 2020 年底添加到 DOM 级别 3），因为它让我们告诉 JS 引擎通过调用来删除事件侦听器，而不必费心：signalabort()removeEventListener

const canvasListener = (new AbortController()).signal;

canvas.addEventListener('click', () => {
  click++;
  if (click === 50) {
    canvasListener.abort();
  } else {
    doSomethingWith(click);
  }
}, {
  signal: canvasListener 
});

（请注意，这不使用标志，因为useCapture标志基本上是完全无用的）useCapture

完成：JS 引擎将中止并清理我们的事件侦听器。没有保留对处理函数的引用，没有确保我们调用的属性与我们调用的完全相同：我们只是取消侦听器。removeEventListeneraddEventListener

实现此目的的一种方法是使用 jquery，因此您可以使用：

canvas.click(yourfunction);

然后，您可以使用以下命令分离所有事件侦听器：

canvas.off();