如何使用类删除监听器

Question

我正在为我的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，但是我怎么能在我的类中有一个全局变量呢？

Answer 1

这不是匿名函数的情况。因为您的removeEventListener调用有第三个true参数，所以您要求浏览器删除定义为捕获侦听器的事件侦听器。浏览器找不到它，因为该事件是作为非捕获添加的，false是默认的第三个参数。

因此，简单地说，添加和删除相同的事件应该与捕获状态相匹配。请参阅Matching event listeners for removal