jQuery에서 이벤트 처리기 비활성화

Question

간단한 tic-tac-toe 게임을 만들고 코드에서 많은 기능을 트리거하는 이벤트 핸들러가 있습니다. 문제는 게임이 끝나면 게임이 끝나고 사용자가 게임과 상호 작용할 수 없도록 해당 이벤트 처리기를 비활성화하려는 것입니다. 나는 그것을 들여다 보았습니다. 바인드 해제/바인드, on/off/prop/attr nulling은 작동하지 않습니다. 조건이 충족 될 때이 이벤트 처리기를 비활성화하는 다른 방법이 있습니까? .one ('클릭') 핸들러를 시작하는 상위 처리기가 아닌 비활성화하고 싶습니다.

//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

대신 함수로 정의 해보십시오 : 핸들러 변수를 제거하기 전에 정의해야하지만 합리적이어야합니다. one으로 전화하기 전에 맨 위에 정의하고 설정하십시오. 코드의 다른 부분에서도 사용할 수 있어야합니다.

편집 : 당신의 바이올린을 보았습니다. 해결 방법은 http://jsfiddle.net/c4496/1/을 참조하십시오. 앞에서 말한 것처럼 $.off은 항상 작동합니다. 사용법이 잘못되었습니다. 원하는 것을하기 위해 $.off 호출을 호출해야만 게임을 끝내고 싶다고 느끼는 순간 코드를 작성하지 않고 변수 값을 변경할 때마다 마술처럼 호출되도록 기대하십시오. 그런 종류의 행동을 원한다면 Knockout 또는 AngularJS를보십시오.

Answer 2

클릭 이벤트가 발생하는 요소를 사용 중지 해 보셨습니까? 예를 들어 당신이 당신의 td 요소에 클릭을 사용하지 않으려면, 당신은 사용할 수 있습니다

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

을하고 싶을 때 다시 활성화 단지 사용

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

널링 소품이나 ATTR 방법을 도움이 안돼. 위와 같은 방법으로 사용하십시오. 희망이 도움이됩니다!

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

편집

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

데모 간격 이벤트 이름 : Fiddle