Событие jQuery bubbling

Question

Я строю игру tic-tac-toe, ниже приведен код, который я установил, чтобы установить флажок игрокаX, затем переключиться на игрока O. Используя $ .on ('click'), чтобы прослушать, в какую ячейку была нажата кнопка. Я получаю то, что, по моему мнению, происходит в пузырях. Каждый раз, когда нажимается одно окно, следующий блок производит экспоненциальную реакцию и так далее. Я пробовал e.stopPropogation, но он блокирует следующий ход.

Как остановить реакцию наводнения?

function playX() { 


    $box.on('click', function (e) { 
     console.log(this); 
     var a = e.target.dataset.index; 
     b[a] = 'X'; 
     $(this).text('X'); 
     playO();  
    }) 
} 
    function playO() { 

    $box.on('click', function (e) { 
     console.log(this); 
     var b = e.target.dataset.index; 
     b[b] = 'O'; 
     $(this).text('O'); 

     playX(); 

}) 
} 

Вот ссылка на все это http://jsfiddle.net/shallak/fdctcvdt/

(Я также использую рамки CSS, материализовать)

Answer 1

Вы не должны связывать событие каждый раз, когда playX или playO является каждый раз, когда регистрируется другой обработчик, который вызывает «экспоненциальное» поведение, которое вы испытываете. Самое быстрое решение вашей проблемы - использовать «$ box.one (...)» вместо «$ box.on (...)» (это будет связывать событие один раз и очистить обработчик)

В любом случае Я взял на себя смелость оптимизируйте реализации:

var results = (function() { 
    var currentPlayer = "X" 
    var b = new Array(9) // Assumed 'b' was array of played moves 

    // "$box" - make sure this one is available by this point 
    // or just set it accordingly. 
    $box.on("click", function(e) { 
     var index = e.target.dataset.index; 

     // make sure the current index was never played 
     if (index === undefined) { 
      if (currentPlayer === "X") { 
       b[index] = "X" 
       currentPlayer = "O" 
      } 
      else { 
       b[index] = "O" 
       currentPlayer = "X" 
      } 
     } 
    }) 

    // Return a reference to the array which holds each squre value 
    return b; 
}())