JavaScript: remove event listener

Question

I am trying to remove an event listener inside a listener definition:

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

How could I do this? this = event ... Thanks.

Answer 1

You need to use named functions.

In addition, the click variable must be outside the handler to increase.

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

---

EDIT:. You can close the click_counter variable as follows:

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

Thus, you can increase the counter by several elements.

---

If you do not want this and want everyone to have their own counter, do the following:

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

EDIT: I forgot to call the handler returned in the last two versions. Fixed.

Answer 2

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

Gotta do it.

Answer 3

You can use an expression with a named function (in this case, the function is called abc ), for example like this:

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

A quick and dirty working example: http://jsfiddle.net/8qvdmLz5/2/ .

Additional information on named function expressions: http://kangax.imtqy.com/nfe/ .

Answer 4

 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 5

If @Cybernate's solution does not work, try disabling the trigger in your own function so that you can reference it.

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

Answer 6

If someone uses jquery, he can do it like this:

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

Hope this can help someone. Please note that the answer given by @ user113716 works just fine :)

Answer 7

I think you may need to predefine the function of the handler, for example:

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

This will allow you to remove the handler by name from itself.

Answer 8

Try it, it worked for me.

 <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

try it

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