即使点击事件处理程序解除了所有处理程序的绑定时，Click事件也执行了单击和悬停事件处理程序

Question

我正在编写一个tic tac toe游戏。在用户选择谁开始以及是否使用X或O之后，他可以将鼠标悬停在空格上，X或O会显示给用户他可以在那里移动。当用户点击电网时，他想要继续前进，X或O将停留在那里，并且此举将是永久的。目前我有这个工作，但以一种非常奇怪的方式。下面的代码：

$('td').hover(moveHover); 
$('td').mouseleave(function(){ 
    $(this).html(''); 
}); 
$('td').click(move); 

function move(){ 
    $(this).unbind(); 
} 

function moveHover(){ 
    if (xO === 'X'){ 
     $(this).append('<i class="fa fa-times fa-5x"></i>'); 
     $('td i').css('color', '#ccc'); 
    } 
    if (xO === 'O'){ 
     $(this).append('<i class="fa fa-circle-o fa-5x"></i>'); 
     $('td i').css('color', '#ccc'); 
    }  
} 

Click事件处理程序只能从元素解除绑定任何点击事件处理程序。它实际上并不是将X或O图标附加为子元素。但是，当我点击一个空网格时，它确实会追加一个图标。这是link所有的代码，如果你想自己尝试。我想知道这怎么可能？

Answer 1

你现在正在添加悬停什么和unhover取消对：

$('td').mouseleave(function() { 
    $(this).html(''); 
}); 

一旦你点击，你已经徘徊，所以X或O的追加。 但是你还没有取消隐藏（mouseleave），所以它还没有被删除。正如你现在点击并因此解除所有绑定，你也解除绑定mouseleave，所以它不会再被移除。

这实际上是一个非常聪明的解决方案。

竖起大拇指的图形也！

Answer 2

这是一个CSS问题，代码使用Bootstrap和Font-Awesome CSS样式，我已将该代码附加到此代码片段中（单击下面的运行按钮），并看到它正在工作。 :)

$(document).ready(function() { 
 
    var xO = ''; 
 
    var xOClass = ''; 
 
    var whoStart = ''; 
 
    var option1 = $('.option1').html(); 
 
    var option2 = $('.option2').html(); 
 
    var choice = $('.choice').html(); 
 

 
    $('.choose').click(choose); 
 

 
    function choose(e) { 
 
    e.preventDefault(); 
 
    if ($('.choice h2').text() === 'Who starts?') { 
 
     whoStart = $(this).children('p').text().substr(0, $(this).children('p').text().indexOf(' ')); 
 
     $('.option1 p, .option2 p').empty(); 
 
     $('.choice h2').remove(); 
 
     $('.choice').prepend('<a href="#" class="restart"><h2>Restart Game</h2></a>'); 
 
     $('.restart').hover(function() { 
 
     $('.restart h2').css('color', '#000'); 
 
     }); 
 
     $('.restart').mouseleave(function() { 
 
     $('.restart h2').css('color', '#777'); 
 
     }); 
 
     $('.restart').click(restart); 
 
     $('.option1 a').remove(); 
 
     $('.option2 a').remove(); 
 
     $('.choice').css('height', '100px'); 
 
     $('td').hover(moveHover); 
 
     $('td').mouseleave(function() { 
 
     $(this).html(''); 
 
     }); 
 
     $('td').click(move); 
 
    } 
 
    if ($('.choice h2').text() === 'X or O?') { 
 
     xO = $(this).children('p').text().substr(13); 
 
     $('.choice h2').text('Who starts?'); 
 
     $('.option1 i').removeClass('fa-times').addClass('fa-laptop'); 
 
     $('.option1 p').text('Computer starts'); 
 
     $('.option2 i').removeClass('fa-circle-o').addClass('fa-user'); 
 
     $('.option2 p').text('Player starts'); 
 
    } 
 
    } 
 

 
    function restart(e) { 
 
    e.preventDefault(); 
 
    $('.option1').empty().html(option1); 
 
    $('.option2').empty().html(option2); 
 
    $('.choice').empty().html(choice); 
 
    $('.choose').click(choose); 
 
    $('td').unbind(); 
 
    $('td').empty(); 
 
    } 
 

 
    function move() { 
 
    $(this).unbind(); 
 
    } 
 

 
    function moveHover() { 
 
    console.log(xO, this); 
 
    if (xO === 'X') { 
 
     $(this).append('<i class="fa fa-times fa-5x"></i>'); 
 
     $('td i').css('color', '#ccc'); 
 
    } 
 
    if (xO === 'O') { 
 
     $(this).append('<i class="fa fa-circle-o fa-5x"></i>'); 
 
     $('td i').css('color', '#ccc'); 
 
    } 
 
    } 
 
});

h1, 
 
.col-xs-4, 
 
.col-xs-12 { 
 
    text-align: center; 
 
} 
 

 
h1, 
 
h2 { 
 
    color: #777; 
 
} 
 

 
a { 
 
    color: #777; 
 
} 
 

 
td { 
 
    width: 150px; 
 
    height: 150px; 
 
} 
 

 
table { 
 
    width: 450px; 
 
    margin: 0 auto; 
 
} 
 

 
.middle { 
 
    box-shadow: 0 -1px 0 #777, 0 1px 0 #777; 
 
} 
 

 
.center { 
 
    box-shadow: -1px 0 0 #777, 1px 0 0 #777; 
 
} 
 

 
.middle.center { 
 
    box-shadow: 0 -1px 0 #777, 0 1px 0 #777, -1px 0 0 #777, 1px 0 0 #777; 
 
} 
 

 
a:hover, 
 
a:focus, 
 
a:active { 
 
    color: #000; 
 
    text-decoration: none; 
 
} 
 

 
.container { 
 
    min-width: 500px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <h1>Tic Tac Toe</h1> 
 
    <div class="row"> 
 
    <div class="col-xs-4 option1"> 
 
     <a href="#" class="choose"> 
 
     <i class="fa fa-times fa-5x"></i> 
 
     <p>I want to be X</p> 
 
     </a> 
 
    </div> 
 
    <div class="col-xs-4 choice"> 
 
     <h2>X or O?</h2> 
 
    </div> 
 
    <div class="col-xs-4 option2"> 
 
     <a href="#" class="choose"> 
 
     <i class="fa fa-circle-o fa-5x"></i> 
 
     <p>I want to be O</p> 
 
     </a> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-xs-12"> 
 
     <table> 
 
     <tr> 
 
      <td class="top left"></td> 
 
      <td class="top center"></td> 
 
      <td class="top right"></td> 
 
     </tr> 
 
     <tr> 
 
      <td class="middle left" id=></td> 
 
      <td class="middle center"></td> 
 
      <td class="middle right"></td> 
 
     </tr> 
 
     <tr> 
 
      <td class="bottom left"></td> 
 
      <td class="bottom center"></td> 
 
      <td class="bottom right"></td> 
 
     </tr> 
 
     </table> 
 
    </div> 
 
    </div> 
 
</div>