Jquery 使用Off和On禁用/启用Javascript事件，如何解除绑定和绑定？

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

我想在屏幕小的时候禁用mouseover事件，如果屏幕大的话重新启用它

这是我的代码：

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

这是我的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>

.off（）正在从.on（）-中删除所有事件处理程序，因此在运行.off（）后，由TabsResponse初始化设置的事件处理程序将不再适用

当minwidth:992px为真时，您应该只需要在resize函数中重新初始化tabsresponse（）

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

var responsiveTabsCheck=true；
$（窗口）。加载（函数（）{
如果（modernizer.mq（'（max width:991px））{/（$（window）.width（）感谢这一点，那么如果我重新初始化响应选项卡，我将不会遇到任何重新初始化的问题？它只是从头开始重新初始化对象？这就是我所期望的，重新初始化将重写ResponsiveTabs（）中的详细信息。如果没有，您也可以检查文档，看看它们是否包含用于删除和添加的方法。我还编辑了我的答案，因为重新初始化包括将“on（'mouseover'）”添加回，在没有任何其他事件处理程序的情况下自己调用它不会添加任何内容。
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;
    }
});