如何解除之前的jQuery悬停/点击事件？

Question

我想在单击元素时取消绑定鼠标悬停事件。

HTML标记：

<div id="foto"></div>
<div id="flotante"></div>
<div id="flotante2"></div>    

jQuery代码：

$('#foto').on({
    mouseover: function(){
        $('#flotante').delay(2000).show('slow');
    },
    mouseleave: function(){
        $('#flotante').hide('slow');
    },
    click: function(){
        // I want the mouseover event to stop executing.        
         $('#flotante2').show();
    }
});

您可以在此处查看示例：http://jsfiddle.net/K85DN/

非常感谢你的帮助

Answer 1

一些变化

1. 使用命名空间事件处理程序，因为我们需要删除它们。
2. 使用setTimeout（）来延迟显示，因为如果鼠标在2秒之前离开元素我们将不得不取消它
3. 使用.stop（）来处理动画队列

尝试

var $flotante = $('#flotante');
$('#foto').on({
    'mouseover.display': function () {
        var timer = setTimeout(function () {
            $flotante.stop(true, true).show('slow');
        }, 2000)
        $flotante.data('timer', timer);
    },
    'mouseleave.display': function () {
        clearTimeout($flotante.data('timer'))
        $flotante.stop(true, true).hide('slow');
    },
    click: function () {
        $(this).off('mouseover.display mouseleave.display');
        clearTimeout($flotante.data('timer'));
        $flotante.stop(true, true).hide('slow');
        $('#flotante2').show();
    }
});

演示：Fiddle