使用 Off 和 On 禁用/启用 Javascript 事件，如何取消绑定和绑定？

Question

我已经使用 Jquery.resposiveTabs 构建了一个菜单项。

我想在屏幕较小时禁用鼠标悬停事件，如果屏幕较大则重新启用。

这是我的代码：

$(window).load(function () {
    if (Modernizr.mq('(max-width: 991px)')) {  // ($(window).width() <= 991)  
        $('a.r-tabs-anchor').off('mouseover');
    }
});

$(window).resize(function () {
    if (Modernizr.mq('(min-width: 992px)')) {
        $('a.r-tabs-anchor').on('mouseover');
    }
    else if (Modernizr.mq('(max-width: 991px)')) { 
        $('a.r-tabs-anchor').off('mouseover');
    }
});

一切正常...除了，如果我减小屏幕大小，则鼠标悬停事件被禁用并且事件处理程序被分离...当我在 Off() 之后调用 On() 时，它不会将处理程序重新附加到事件。而且我不知道如何找到事件处理程序并重新附加它？

这是我的 JavaScript 初始化，最初将鼠标悬停事件附加到 Jquery.responsivetabs 处理程序：

/*==========  Tabs Responsive ==========*/
function TabsResponsive(){
    if($('#tabs-responsive').length){
        $('#tabs-responsive').responsiveTabs({
            rotate: false,
            active:0,
            event: 'mouseover',
            startCollapsed: 'accordion',
            collapsible: 'accordion',
            animation: 'slide',
            duration:300,
            setHash: false
        });
    }
}

这是我的 html 菜单：

<li class="">
<div class="product-collateral" id="tabs-responsive">
    <ul class="nav-tab" id="classifiedMenu">
        <li><a href="#books" aria-controls="books" data-toggle="tab">Books</a></li>
        <li><a href="#sports" aria-controls="sports" data-toggle="tab">Sports</a></li>
    </ul>                                    
    <div id="classifiedContent" class="tab-content overflow-auto">
        <div class="tab-pane classified" id="books">
            <div class="text-content">
                <ul class="classified-links">
                    <li><a href="#">Children</a></li>
                    <li><a href="#">Comics</a></li>
                    <li><a href="#">Cookbooks</a></li>
                </ul>
            </div>
        </div>       

         <div class="tab-pane classified" id="sports">
            <div class="text-content">
                <ul class="classified-links">
                    <li><a href="#">Cycling</a></li>
                    <li><a href="#">Golf</a></li>
                    <li><a href="#">Football</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

Answer 1

.off() 正在从 .on() - jQuery .off() API 中删除所有事件处理程序，因此在 .off() 运行后，您初始化 TabsResponsive 设置的事件处理程序不再适用。

当 min-width: 992px 为真时，您只需在 resize 函数中重新初始化 TabsResponsive()。

    $(window).resize(function () {
    if (Modernizr.mq('(min-width: 992px)')) {
        TabsResponsive(); //Reinitialize or use other method if provided by API
    }
    else if (Modernizr.mq('(max-width: 991px)')) { 
        $('a.r-tabs-anchor').off('mouseover');
    }
    });

编辑：另一个想法是，为了防止您的 TabsResponsive 在不需要时不断被重写，您还可以为 ifs 添加一个附加条件。这样，如果用户以 1200px 加载并将大小调整为 1000px，则您不会重新初始化。有点像，

var responsiveTabsCheck = true; 
$(window).load(function () {
    if (Modernizr.mq('(max-width: 991px)')) {  // ($(window).width() <= 991)  
        $('a.r-tabs-anchor').off('mouseover');
        responsiveTabsCheck = false;
    }
});

$(window).resize(function () {
    if (Modernizr.mq('(min-width: 992px)') && responsiveTabsCheck === false) {
        TabsResponsive(); //Reinitialize or use other method if provided by API
        responsiveTabsCheck = true;
    }
    else if (Modernizr.mq('(max-width: 991px)') && responsiveTabsCheck === true) { 
        $('a.r-tabs-anchor').off('mouseover');
        responsiveTabsCheck = false;
    }
});