jquery - 如何取消绑定以前的 jQuery 悬停/单击事件？

Question

我想在单击元素时取消绑定 mouseover 事件。

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

演示：小提琴