Javascript的removeEventListener不起作用

我已經嘗試了一些解決方案，例如回呼函式都是相同的。我仍然無法讓它作業。

視圖模塊中的 removeClickEventHandler 函式不起作用。從控制器應用事件偵聽器。我從視圖模塊中提取了一些代碼，但我保留了控制器模塊的原樣。

控制器代碼：

import navigationView from "./view/navView.js";
import ticTacToeView from "./view/ticTacToeView.js";
import ticTacModule from "./modules/ticTacModule.js";

class Controller {
      constructor() {
        navigationView.addHoverEventHandlers(navigationView.hoverFunction);
        navigationView.addClickHandler(this.showContent.bind(this));
      }
    
      showContent() {
        ticTacToeView.renderContent(navigationView.clickedContent);
        ticTacToeView.addClickEventHandler(this.ticTacToeControl.bind(this));
        ticTacToeView.addHoverHandler(ticTacToeView.hoverFunction);
      }
    
      ticTacToeControl(clickedBox) {
        if (ticTacToeView.checkIfBoxEmpty(clickedBox)) {
          ticTacToeView.createMark(clickedBox, ticTacModule.activePlayer);
          ticTacModule.updateBoardState(clickedBox);
          ticTacModule.changeActivePlayer();
          ticTacToeView.highlightActivePlayer(ticTacModule.activePlayer);
          ticTacModule.checkForWinner();
          if (ticTacModule.winner) {
            ticTacToeView.renderWinner(ticTacModule.winner);
            ticTacToeView.removeClickEventHandler(this.ticTacToeControl);
          }
        }
      }
    }

這是視圖模塊代碼：

import View from "./View.js";

class TicTacToeView extends View {

  addClickEventHandler(fn) {
    const ticTacContainer = document.querySelector(".tic-tac-toe");
    ticTacContainer.addEventListener("click", fn, true);
  }

  removeClickEventHandler(fn) {
    const ticTacContainer = document.querySelector(".tic-tac-toe");
    ticTacContainer.removeEventListener("click", fn, true);
  }
}
export default new TicTacToeView();

uj5u.com熱心網友回復：

bind創建一個帶有新參考的新函式。this.ticTacToeControl和this.ticTacToeControl.bind(this)是兩個不同的函式，具有兩個不同的參考。將函式參考存盤在一個變數中并使用它來洗掉事件偵聽器。

class Controller {
  constructor() {
    navigationView.addHoverEventHandlers(navigationView.hoverFunction);
    navigationView.addClickHandler(this.showContent.bind(this));
  }

  showContent() {
    ticTacToeView.renderContent(navigationView.clickedContent);
    this.handler = this.ticTacToeControl.bind(this);
    ticTacToeView.addClickEventHandler(this.handler);
    ticTacToeView.addHoverHandler(ticTacToeView.hoverFunction);
  }

  ticTacToeControl(clickedBox) {
    if (ticTacToeView.checkIfBoxEmpty(clickedBox)) {
      ticTacToeView.createMark(clickedBox, ticTacModule.activePlayer);
      ticTacModule.updateBoardState(clickedBox);
      ticTacModule.changeActivePlayer();
      ticTacToeView.highlightActivePlayer(ticTacModule.activePlayer);
      ticTacModule.checkForWinner();
      if (ticTacModule.winner) {
        ticTacToeView.renderWinner(ticTacModule.winner);
        ticTacToeView.removeClickEventHandler(this.handler);
      }
    }
  }
}

標籤：javascript 模型视图控制器 发布订阅

上一篇：如何在array.forEach中使用預定義函式作為回呼？

下一篇：我在javascripthtml中斷行有問題