I am trying to remove event using window.removeEventListener which I have added using window.addEventListener for event beforeunload but it is not getting removed. I am trying following code
addAlertWithListener(){
window.addEventListener('beforeunload', (event) => {
// Cancel the event as stated by the standard.
event.preventDefault();
// Chrome requires returnValue to be set.
event.returnValue = 'You are currently in edit mode. Are you sure you want to refresh the page?';
},true);
}
It is being added but when I am trying to remove the same function using below code :
removeAlertWithListener() {
window.removeEventListener('beforeunload', null,true);
}
It still gives alert message. Am I missing something over here? I tried with and without last param. None of the thing seems working here.
addEventListener and removeEventListener are implemented in a weird way in JavaScript, they need exactly the same parameters in order to retrieve the registered listeners. That's different from, like, setTimeout where an id is returned.
In Angular, usually I do something like this:
private readonly BEFORE_UNLOAD_PARAMS = ['beforeunload', (event) => ..., true];
private isBeforeUnloadActive: boolean = false;
addAlertWithListener() {
if (this.isBeforeUnloadActive) return;
window.addEventListener(...this.BEFORE_UNLOAD_PARAMS);
this.isBeforeUnloadActive = true;
}
removeAlertWithListener() {
window.removeEventListener(...this.BEFORE_UNLOAD_PARAMS);
this.isBeforeUnloadActive = false;
}
The flag will prevent the listener to be registered twice