在特定视口宽度以下禁用事件处理程序

Question

我目前正在尝试在窗口宽度小于700px时禁用脚本。 我看过其他帖子上的建议，但到目前为止还没有任何工作。

window.onresize = function () {
    if(window.innerWidth < 700) {
        $(window).bind('scroll', function() {
            if ($(window).scrollTop() > 100) {
                $('#projectinfo').hide();
            } else {
                $('#projectinfo').show();
            }
        });
    }
}

Answer 1

问题在于，一旦将事件处理程序附加到窗口，就永远不会解除绑定 。 我建议您也不要在每次 window.resize事件触发时都绑定滚动事件处理程序，因为这是非常昂贵的事件性能。 同样，您将重新绑定一个已经存在的处理程序，如果它可以工作的话，仍然是非常糟糕的做法。

您可能真正想要的是决定document.ready是否附加滚动处理程序。 如果调整大小的用例确实相关（Web用户通常在查看特定页面时通常不调整浏览器窗口的大小，这只是Web前端开发人员一直在检查其工作的响应性），请首先测试您的滚动处理程序是否当前附加到window并且只有在未添加和 （&&）您的window.innerWidth >= 700 ，才添加它。 否则，请再次检查滚动处理程序是否存在，并在其存在并且 window.innerWidth < 700情况下解除绑定。

http://api.jquery.com/unbind/

另外，请注意，您可以在声明绑定时使用event.name语法来命名事件。 在此处的jQuery文档中找到此内容：

使用命名空间

代替维护对处理程序的引用以解除绑定，我们可以为事件命名空间并使用此功能来缩小我们的解除绑定操作的范围。 如对.bind()方法的讨论所示，在绑定处理程序时，使用句点（ . ）字符定义名称空间：

 $("#foo").bind("click.myEvents", handler ); 

当处理程序以这种方式绑定时，我们仍然可以按常规方式将其解除绑定：

 $("#foo").unbind("click"); 

但是，如果我们想避免影响其他处理程序，则可以更加具体：

 $("#foo").unbind("click.myEvent"); 

我们也可以取消绑定命名空间中的所有处理程序，而与事件类型无关：

 $("#foo").unbind(".myEvent"); 

当我们开发插件或以其他方式编写将来可能与其他事件处理代码交互的代码时，将名称空间附加到事件绑定上特别有用。

Answer 2

unbind并bind

var $w = $(window);

function scrollHandler(e) {
  $('#projectinfo').toggle($w.scrollTop() > 100);
}

$(window).resize(function (e) {
  $w.width() < 700 ? $w.bind('scroll', scrollHandler) : $w.unbind('scroll', scrollHandler);
});

显然，这需要进行一些优化改进，但这只是为了展示基本思想。

Answer 3

不要使用bind （已弃用），请使用on （和off ）。 评论中的其他建议

(function ($, w, d) {
    $(function () {
        var $projectinfo = $('#projectinfo');
        var $w = $(w);
        var useScroll;

        function useScroll() {
            if ($w.scrollTop() > 100) {
                // Don't use hide() and show(), add or remove a class, instead
                $projectinfo.addClass('hidden');
            } else {
                $projectinfo.removeClass('hidden');
            }
        });

        function checkWindowWidth() {
            var useScrollTop = $w.width() < 700;
            if (useScrollTop) { 
                $w.on('scroll', useScroll);
            } else {
                $w.off('scroll', useScroll);
            }
        };

        // On resize, just check once the viewport width
        $w.on('resize', function () {
            // You should use a 'debounce' function, for this
            checkWindowWidth();
        });


    })
})(jQuery, window, document);

看到这个： 去抖动 ， 绑定vs