Ya probé algunas soluciones, como que las funciones de devolución de llamada son las mismas. Todavía no puedo hacer que funcione.
La función removeClickEventHandler dentro del módulo de vista no funciona. El detector de eventos se aplica desde el controlador. Abstraí algo de código del módulo de vista pero dejé el módulo del controlador como está.
Código del controlador:
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); } } } }
Este es el código del módulo de vista:
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();
bind
crea una nueva función con una nueva referencia. this.ticTacToeControl
y this.ticTacToeControl.bind(this)
son dos funciones diferentes con dos referencias diferentes. Almacene la referencia de la función en una variable y utilícela para eliminar el detector de eventos.
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); } } } }