JQuery事件冒泡

Question

我正在构建一个井字游戏，下面是我设置的代码，让playerX标记一个盒子，然后切换到玩家O。使用$.on(‘点击’)来监听哪个盒子被点击了。我得到了我认为是事件泡沫的东西。每次点击一个框，下一个框就会产生指数级的反应，以此类推。我尝试过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框架Materialize)

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