I'm trying to remove an event listener inside of a listener definition:
canvas.addEventListener('click', function(event) { click++; if(click == 50) { // remove this event listener here! }
// More code here ...How could I do that? this = event...
29 Answers
You need to use named functions.
Also, the click variable needs to be outside the handler to increment.
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 could close around the click_counter variable like this:
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);This way you can increment the counter across several elements.
If you don't want that, and want each one to have its own counter, then do this:
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 had forgotten to name the handler being returned in the last two versions. Fixed.
7 canvas.addEventListener('click', function(event) { click++; if(click == 50) { this.removeEventListener('click',arguments.callee,false); }Should do it.
2You could use a named function expression (in this case the function is named abc), like so:
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 ...
}Quick and dirty working example: .
More information about named function expressions: .
0If @Cybernate's solution doesn't work, try breaking the trigger off in to it's own function so you can reference it.
clickHandler = function(event){ if (click++ == 49) canvas.removeEventListener('click',clickHandler);
}
canvas.addEventListener('click',clickHandler);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;
};
};I think you may need to define the handler function ahead of time, like so:
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 within itself.
0If 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 that it can help someone. Note that the answer given by @user113716 work nicely :)
I ended up creating a helper function for that:
function addDisposableEventListener({ target, eventType, eventHandler }) { target.addEventListener(eventType, eventHandler) return { dispose: () => target.removeEventListener(eventType, eventHandler) }
}Usage Examples:
const button = document.querySelector('#button')
const buttonClickListener = addDisposableEventListener({ target: button, eventType: 'click', eventHandler: event => { event.preventDefault() // ... code to handle the event buttonClickListener.dispose() // listener can be disposed here }
})
// ... more code
buttonClickListener.dispose() // listener can be disposed hereTry this, it worked for me.
<button>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>
