在特定視口寬度以下禁用事件處理程序

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