Question

我希望你能提供帮助。

我已经删除了代码以使问题更容易阅读。

我有一个按钮，可以加载视频模式并触发GET请求。

export default class Videos {

  constructor() {
    this.button1 = document.getElementById('button1');
    this.button2 = document.getElementById('button2');
    this.button3 = document.getElementById('button3');
  }

  init() {
    this.populateModal();
  }

  populateModal(el) {

    this.button1.addEventListener("click", (e) => {
      e.preventDefault();
      this.videoLoadHandler(value);
    });

    this.button2.addEventListener("click", (e) => {
      e.preventDefault();
      this.videoLoadHandler(value);
    });

    this.button3.addEventListener("click", (e) => {
      e.preventDefault();
      this.videoLoadHandler(value);
    });

  }

  videoLoadHandler(e,value){
    console.log("video Plays and get request happens");
  }

}

视频播放和获取请求按预期完美运行。

每次点击特定按钮时，都会触发populateModal功能。这意味着videoLoadHandler函数在populateModal函数被触发的时间内多次触发，我相信这是因为正在为每个新创建的事件列表器创建一个新的事件监听器并多次堆叠/触发。我几乎能够解决这个问题：

var self = this;
this.button1.addEventListener("click", function test(e){
  e.preventDefault();
  self.videoLoadHandler(e,cta_url2,hash);
  self.button2.removeEventListener("click", test);
});

这里的问题是删除了事件监听器，因此在初始按钮点击后e.preventDefault()不再触发。

在javascript类中创建相同的事件之前，实现此目的的理想方法是什么，或者只是删除事件侦听器？

非常感谢您的帮助拜托，谢谢萌。

如何正确删除JavaScript类函数中的事件处理程序？

0 个答案: