jQuery click事件在父元素上多次觸發

Question

https://jsfiddle.net/50Lw423g/2/

  gameLogic: function() {
    console.log("GAME LOGIC");
    alert("Your Turn!");
    var that = this;
    $(".game-screen").on("click", ".tic", function() {
      console.log("EVENT ATTACHED");
      var movesDisplay = $(this).text(),
        playerOne = that.playerOneMoves,
        moveID = +(this.id);
      if (movesDisplay !== "O" && movesDisplay !== "X") {
        that.playerOneMoves.push(moveID);
        if (playerOne.length > 2) {
          if (that.checkIfWinCondition(playerOne, that.winConditions)) {
            alert("GAME OVER!");
            that.inGame = false;
            ticTacToe.restartGame();
          }
        }
        $(this).text(that.playerFaction === "X" ? "X" : "O");
      }
    });
  },

我正在寫井字游戲，遇到了這個問題-當“播放”多個會話時，單擊事件不斷增加。 我通過在每次附加新的單擊事件之前清除以前的單擊事件來解決此問題。

$(".game-screen").off().on("click", ".tic", function () { //do stuff }

順便說event.stopPropagation（）和event.stopImmediatePropagation（） 沒有工作。

無論如何，盡管我設法解決了這個問題並理解了單擊事件為什么會復合，但我似乎無法gameLogic: function()是為什么那些復合單擊事件一直調用父函數 gameLogic: function() 。 嘗試連續“播放”多個會話-

console.log("GAME LOGIC"); alert("Your Turn!"); 在每個會話中被調用的次數成倍增加。 jQuery是否使用父函數來跟蹤單擊事件或其他事件？ 誰能解釋在幕后發生的事情？ 為什么事件處理程序會繼續引用父函數？

Answer 1

將您的函數實現從下面的gameLogic函數移出；

function gameScreenClick(){
 // your click event handler code.....
} 

然后

$(".game-screen").on("click", ".tic", gameScreenClick);

Answer 2

我跟蹤了調用堆棧，並查看了jQuery dispatch: function() 。 實際上，事實證明，問題不在於jQuery內部引用其單擊函數和處理程序的方式。

罪魁禍首在第46行getUserInput()附加了一個事件處理程序，該事件處理程序又附加了chooseFaction()事件處理程序。 在下一個會話中， getUserInput()附加一次，並且chooseFaction()被附加2次（之前是+1次）-因此， chooseFaction()觸發3次，調用generateBoard() ，然后調用gameLogic()等因此，對gameLogic()調用每次迭代gameLogic()指數增長。

將$(.game-screen).off() restartGame()函數中，以在開始新會話之前刪除所有單擊事件，這是一種更干凈的解決方案。

解決方案： https : //jsfiddle.net/50Lw423g/4/