如何使用类删除监听器

问题描述

我正在为我的JS使用StimulusJS，我希望能够在用户转到新页面时删除侦听器。

到目前为止，我已经创造了对我来说似乎很好的东西

import { Controller } from "stimulus"


export default class extends Controller {
  connect() {
    this.addListenerCloseModal()
  }

  disconnect() {
    this.removeListenerCloseModal()
  }

  addListenerCloseModal() {
    window.addEventListener('click',this.closeModal)
  }

  removeListenerCloseModal() {
    window.removeEventListener('click',this.closeModal,true)
  }

  closeModal(event) {
    var modal = document.getElementById("myModal");

    if (event.target == modal) {
      modal.style.display = "none";
    }
  }
}

但是问题是侦听器仍然存在。我已经读过有关bind和Javascript removeEventListener not working的评论，但我不太了解。看来我应该有一个绑定我的this.closeModal的全局变量，但是我该如何在我的班级中拥有一个全局变量？

解决方法

匿名函数不是这种情况。您要浏览器删除定义为捕获侦听器的事件侦听器，因为您的removeEventListener调用具有第三个true参数。浏览器无法找到它，因为该事件是作为 non-captureing 添加的，其中false是默认的第三个参数。

因此，简单来说，添加和删除同一事件应与捕获状态匹配。参见Matching event listeners for removal