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/