jQuery事件冒泡

Question

我正在構建一個井字游戲，下面是我設置的代碼，讓playerX標記一個盒子，然后切換到玩家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框架Materialise）

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;
} () )