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

Disable event handler below a certain viewport width

本文关键字：事件处理 程序 视口      更新时间：2023-09-26

我目前试图禁用脚本时，窗口宽度小于700px。我看了其他帖子上的建议，但到目前为止还没有任何效果。

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

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

你真正想要的可能是决定文件。准备好是否附加滚动处理程序。如果调整大小用例确实是相关的(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");

在开发插件或插件时，将名称空间附加到事件绑定上特别有用否则编写可能与其他事件处理交互的代码未来的代码。

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

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

不要使用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
相关文章：