[英]Javascript's removeEventListener not working
我已經嘗試了一些解決方案,例如回調函數都是相同的。 我仍然無法讓它工作。
視圖模塊中的 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();
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);
}
}
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.