取消绑定窗口滚动上的所有鼠标悬停事件答案

【问题标题】：Unbind all mouseover events on window scroll取消绑定窗口滚动上的所有鼠标悬停事件
【发布时间】：2012-12-13 14:41:51
【问题描述】：

我试过这段代码：

$(function(){
    $('.media-in').bind('mouseover',function(){
        $(this).children('.media-options').show();
    });
    $('.media-in').bind('mouseout',function(){
        $(this).children('.media-options').hide();
    });
    $(window).on('scroll',function(){
        $('.media-in').unbind('mouseover');
    });
});

它没有按预期工作。当我滚动页面时，我想unbindmouseover 上发生的事件，我该怎么做？

另外，有什么方法可以通过数组滚动页面上的unbind 事件？比如：

$(window).scroll(function(){ 
    $(this).unbind(['mouseover','click','mouseout']);
});

【问题讨论】：

标签： jquery scroll bind unbind

【解决方案1】：

从 jQuery 1.7 开始，off() 和 on() 是绑定和取消绑定事件处理程序的首选方法。

所以要从一个元素中删除所有处理程序，请使用：

$('.media-in').off();

或者对于特定的处理程序：

$('.media-in').off('mouseover mouseout click');

【讨论】：

【解决方案2】：

您可以使用on() 和off()，但是一旦事件处理程序被移除，一旦您停止滚动它就不会神奇地返回，您必须使用on() 再次重新绑定它。

$(function(){
    var timer;
    media_bind();

    $(window).on('scroll', function(){
         clearTimeout(timer);
         $('.media-in').off('mouseover mouseout');
         timer = setTimeout(media_bind, 500);
    });

    function media_bind() {
         $('.media-in').on(
             mouseover: function() {
                 $(this).children('.media-options').show();
             },
             mouseout: function() {
                 $(this).children('.media-options').hide();
             }
         });
    }  
});

【讨论】：