javascript - 在特定视口(viewport)宽度以下禁用事件处理程序

Question

我目前正在尝试在窗口宽度小于 700 像素时禁用脚本。我已经查看了其他帖子中的建议，但目前还没有任何效果。

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

Answer 1

问题是，一旦事件处理程序附加到窗口，您就永远不会解除绑定(bind)。我建议您也不要每次 window.resize 都绑定(bind)滚动事件处理程序。事件触发器，因为这在性能方面是一个极其昂贵的事件。此外，您不断重新绑定(bind)一个已经存在的处理程序，如果它能正常工作，这仍然是非常糟糕的做法。

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

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

另请注意，您可以在绑定(bind)时使用 event.name 命名事件声明绑定(bind)时的语法。为此，请在 jQuery 文档中找到:

Using Namespaces

Instead of maintaining references to handlers in order to unbind them, we can namespace the events and use this capability to narrow the scope of our unbinding actions. As shown in the discussion for the .bind() method, namespaces are defined by using a period (.) character when binding a handler:

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

When a handler is bound in this fashion, we can still unbind it the normal way:

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

However, if we want to avoid affecting other handlers, we can be more specific:

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

We can also unbind all of the handlers in a namespace, regardless of event type:

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

It is particularly useful to attach namespaces to event bindings when we are developing plug-ins or otherwise writing code that may interact with other event-handling code in the future.