在jQuery中禁用事件处理程序

Question

我正在创建一个简单的井字游戏，我有一个触发代码中的许多函数的事件处理程序。问题是，当游戏结束时，我想禁用那个事件处理程序，这样游戏就可以结束，用户就不能与它交互了。我已经研究过了，unbind/bind, on/off/prop/attr null不起作用。是否有其他方法在满足条件时禁用此事件处理程序?我想禁用。one('click')处理程序，而不是开始的父处理程序。

//Creates the variables needed to be manipulated later
$(document).ready(function () {
    var X = 'X';
    var O = 'O';
    var currentPlayer;
    var turnCount = 0;
    var xMoves = [];
    var oMoves = [];
    var cellTracker;
    var winAlert;
    var winConditions = [
        ['c1', 'c2', 'c3'],
        ['c4', 'c5', 'c6'],
        ['c7', 'c8', 'c9'],
        ['c1', 'c4', 'c7'],
        ['c2', 'c5', 'c8'],
        ['c3', 'c6', 'c9'],
        ['c1', 'c5', 'c9'],
        ['c3', 'c5', 'c7']
    ];
    /*Set's the current player to X if turnCount is odd
    And to O if turnCount is even*/
    var setCurrentPlayer = function () {
        if (turnCount % 2 === 0) {
            currentPlayer = O;
        } else {
            currentPlayer = X;
        }
    };
    //Pushes cellTracker's value to the curent player's move variable
    var storeMoves = function () {
        if (currentPlayer === X) {
            xMoves.push(cellTracker);
        } else if (currentPlayer === O) {
            oMoves.push(cellTracker);
        }
    };
    //Compares players moves with the winConditions to determine a winner
    var determineWin = function (pMoves) {
        for (var i = 0; i < winConditions.length; i++) {
            if (winConditions[i].length > pMoves.length) {
                continue;
            }
            for (var j = 0; j < winConditions[i].length; j++) {
                winAlert = false;
                for (var k = 0; k < pMoves.length; k++) {
                    if (pMoves[k] === winConditions[i][j]) {
                        winAlert = true;
                        break;
                    }
                }
                if (!winAlert) break;
            }
             if (winAlert) {
                alert(currentPlayer + " wins!");
                break;
            }
        }
    };
    /*Place's an X or an O when a cell is clicked depending
    on the current player, and updates the turnCount*/
    $('td').one('click', function () {
        turnCount += 1;
        setCurrentPlayer();
        $(this).text(currentPlayer);
        cellTracker = $(this).attr('id');
        storeMoves();
        determineWin(currentPlayer == 'X' ? xMoves : oMoves);
        if (turnCount === 9 && winAlert === false) {
            alert("Tie game!");
        }
        console.log(turnCount, xMoves, oMoves, winAlert);
    });
});

Answer 1

尝试将其定义为函数:

var handler = function () {
        turnCount += 1;
        setCurrentPlayer();
        $(this).text(currentPlayer);
        cellTracker = $(this).attr('id');
        storeMoves();
        determineWin(currentPlayer == 'X' ? xMoves : oMoves);
        if (turnCount === 9 && winAlert === false) {
            alert("Tie game!");
        }
        console.log(turnCount, xMoves, oMoves, winAlert);
    });

然后附加:

$('td').one('click', handler);

当你想删除它时，你可以输入:

$('td').off('click', handler);

编辑:您需要在删除处理程序变量之前定义它，但这应该是合理的。只要在顶部定义它，并在调用one之前设置它，它应该可以用于代码的任何其他部分。

编辑:看了看你的小提琴。有关可行的解决方案，请参阅http://jsfiddle.net/c4496/1/。就像我之前说的，$.off总是有效的:你的用法是错误的。要做你想做的事，你必须在你检测到你想结束游戏的那一刻调用$.off，而不是在底部编写代码，并期望它在你改变变量值的时候神奇地为你调用。如果你想要这种行为可以去看看Knockout或AngularJS

Answer 2

您是否尝试过禁用发生单击事件的元素?例如，如果您想禁用单击您的td元素，您可以使用:

$('td').prop("disabled",true);

，当你想重新启用它时，只需使用:

$('td').prop("disabled",false);

prop或attr方法无效。请使用上述方法。

Answer 3

使用。off()和事件名间距

$('td').one('click.mygame', function () {
    turnCount += 1;
    setCurrentPlayer();
    $(this).text(currentPlayer);
    cellTracker = $(this).attr('id');
    storeMoves();
    determineWin(currentPlayer == 'X' ? xMoves : oMoves);
    if (turnCount === 9 && winAlert === false) {
        alert("Tie game!");
    }
    if(condition){ //like ( winAlert === true  || turnCount === 9)
        $('td').off('click.mygame')
    }
    console.log(turnCount, xMoves, oMoves, winAlert);
});

演示:小提琴