javascript - 即使单击事件处理程序取消绑定(bind)所有处理程序，单击事件也会执行单击和悬停事件处理程序

Question

我正在编写一个井字棋游戏。在用户选择谁开始以及是否使用 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');
    }       
}

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

Answer 1

您现在所做的是在悬停时添加并在悬停时删除:

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

单击后，您已经悬停，因此会附加 X 或 O。 但是您还没有取消悬停(鼠标离开)，因此它还没有被删除。当您现在单击并因此取消绑定(bind)所有内容时，您也取消了 mouseleave 的绑定(bind)，因此它永远不会再被删除。

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

对图形也竖起大拇指!