当窗口大小为时禁用 jQuery 脚本答案

【问题标题】：Disable jQuery script when window size is当窗口大小为时禁用 jQuery 脚本
【发布时间】：2015-03-16 17:28:28
【问题描述】：

当窗口大小小于 700 像素时，我试图禁用我的 jQuery 脚本。因此，当窗口大小低于 700 像素时，此脚本不应该工作。我无法让它工作。加载页面时脚本不起作用，但是当我调整浏览器窗口大小时，无论窗口大小如何，它都可以工作。

这是我当前的代码：

jQuery(document).ready(function () {

    jQuery(window).resize(function () {
        if (jQuery(window).width() < 700) {

            jQuery("#block-menu-block-4 li, #block-menu-block-5 li").hover(

            function () {
                jQuery(this).addClass('hover');
                jQuery(this).children('.listContainer1, .listContainer2, .listContainer3, .listContainer4, .listContainer5, .listContainer6, .listContainer7').stop(true, true).show();
            },

            function () {
                jQuery(this).removeClass('hover');
                jQuery(this).children('.listContainer1, .listContainer2, .listContainer3, .listContainer4, .listContainer5, .listContainer6, .listContainer7').stop(true, true).slideUp(100);
            });

        }
    });

});

【问题讨论】：

警告：您在 resize 事件中注册了一个 hover 事件，因此在鼠标移动几下后将获得 1000 个处理程序。
离题了，但你最好只使用 CSS（包括过渡）而不是尝试通过 JavaScript 来做到这一点。然后，您可以针对不同的效果定位不同的视口大小。
“当窗口大小小于 700 像素时，我正在尝试禁用我的 jQuery 脚本...” - 此处可能有误，但您的脚本似乎会附加第一个时间窗口 under 700 像素。这似乎与您所要求的相反？...
如果你提供 jsfiddle 我可以让它为你工作。

标签： jquery

【解决方案1】：

您在事件中注册事件时犯了一个基本（严重）错误。您当前将在调整大小时连接 100/1000 个事件处理程序，并且永远不会删除旧的，因此您的代码当然会继续执行。

您需要注册一次hover 并测试hover 处理程序中的大小。

另一种方法是使用“onandoff”来打开和关闭处理程序。

另一种是根据大小向容器/主体添加一个类，并使用仅匹配特定大小/类的委托事件处理程序。

【讨论】：