JavaScript：删除事件监听器

我试图删除侦听器定义中的事件侦听器：

canvas.addEventListener('click', function(event) { click++; if(click == 50) { // remove this event listener here! } // More code here ... 

我怎么能这样做？ 这=事件…谢谢。

Answer 1

你需要使用命名函数。

此外， clickvariables需要在处理程序之外进行增加。

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

---

编辑：你可以像这样closuresclick_countervariables：

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

编辑： 我忘了命名最后两个版本中返回的处理程序。 固定。

Answer 2

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

应该这样做。

Answer 3

你可以使用一个命名的函数expression式（在这种情况下函数被命名为a ），如下所示：

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

快速和肮脏的工作示例： http : //jsfiddle.net/WqpfZ/1/ 。

有关命名函数expression式的更多信息： http : //kangax.github.io/nfe/ 。

Answer 4

如果@ Cyber​​nate的解决scheme不起作用，请尝试将触发器closures到自己的function，以便引用它。

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

Answer 5

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

Answer 6

如果有人使用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给出的答案很好:)

Answer 7

我想你可能需要提前定义处理函数，如下所示：

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

这将允许您从名称内部删除名称。

Answer 8

试试这个，它为我工作。

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

Answer 9

尝试这个

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