使用命名空间

Question

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

IEnumerable<T>

Answer 1

问题是，一旦将事件处理程序附加到窗口，您就永远取消绑定。我建议你也不要每次 window.resize事件触发时绑定滚动事件处理程序，因为这是一个非常昂贵的事件性能。此外，你继续重新绑定一个已经存在的处理程序，如果它完全有效，它仍然是非常糟糕的做法。

你真正想要的是决定document.ready是否附加滚动处理程序。如果调整大小用例确实相关（网页用户通常不会调整浏览器窗口，而查看特定页面，那么它就是Web前端开发人员为检查其工作的响应性而继续做的事情），首先测试您的滚动处理程序当前是否已附加到window，并且仅在和（＆amp;＆amp;）window.innerWidth >= 700时添加它。否则，再次检查滚动处理程序是否存在，如果存在和 window.innerWidth < 700，则解除绑定。


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

另外，请注意，在声明绑定时，可以使用event.name语法在绑定时命名事件。在jQuery docs herefor：
中找到这个

使用命名空间

不是维护对处理程序的引用以取消绑定它们，   我们可以命名事件并使用此功能来缩小事件   我们解除绑定行动的范围。如讨论中所示   .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 （已弃用），使用（以及关闭）。评论中的其他一些建议

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

请参阅：debounce，bind vs on

禁用某个视口宽度以下的事件处理程序

3 个答案:

使用命名空间