以角度刪除 beforeunload 事件

Question

我正在嘗試使用window.removeEventListener刪除事件，我已經使用window.addEventListener添加了事件beforeunload但它沒有被刪除。 我正在嘗試以下代碼

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

它正在添加，但是當我嘗試使用以下代碼刪除相同的功能時：

 removeAlertWithListener() {
    window.removeEventListener('beforeunload', null,true);
  }

它仍然會發出警報消息。 我在這里錯過了什么嗎？ 我嘗試使用和不使用最后一個參數。 似乎沒有任何事情在這里起作用。

Answer 1

addEventListener和removeEventListener在 JavaScript 中以一種奇怪的方式實現，它們需要完全相同的參數才能檢索注冊的偵聽器。 這與返回 id 的setTimeout不同。

在 Angular 中，通常我會這樣做：

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

該標志將阻止偵聽器注冊兩次