时间戳

首页 > 解决方案 > 如何使用类删除监听器

javascript - 如何使用类删除监听器

问题描述

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

标签： javascriptstimulusjs

解决方案

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

所以简单来说，添加和删除相同的事件应该匹配捕获状态。请参阅匹配事件侦听器以进行删除

推荐阅读