如何使用类删除监听器答案

【问题标题】：how to remove listener by using classes如何使用类删除监听器
【发布时间】：2021-01-11 05:57:02
【问题描述】：

我正在为我的 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，但是我的班级中如何才能有一个全局变量？

【问题讨论】：

可能是disconnect的拼写错误？你有disconnet
啊，是的，谢谢，我拼错了，但即使写得正确，它也不起作用。

标签： javascript stimulusjs

【解决方案1】：

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

所以简单来说，添加和删除相同的事件应该匹配 正在捕获 状态。见Matching event listeners for removal

【讨论】：