如何使用类删除侦听器

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不工作的评论，但我真的不理解。似乎我应该有一个全局变量来绑定我的this.closeModal，但我的类中怎么能有全局变量呢？

Answer 1

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

因此，简单地说，添加和删除同一事件应该与捕获状态相匹配。请参阅匹配事件侦听器以删除