Question

当页面宽度低于1100px时，我需要禁用点击。但如果用户决定将其放大，那么我需要重新启用它。我有这个代码，但如果你将页面大小调整到超过1100px，它就不起作用了;

$(window).on('resize', function () {  
    if ($(window).width() < 1100)
    {
        $('.portfolio-box-caption, .portfolio-box, .popup-gallery, .container-fluid').click(function(){
            return false;
        });
    }
    else if ($(window).width() > 1100)
    {
        $('.portfolio-box-caption, .portfolio-box, .popup-gallery, .container-fluid').click(function(){
            return true;
        });
    }
}).resize();

Answer 1

您需要绑定click事件然后解除绑定。在加载时检查页面大小将决定您的起点。

http://api.jquery.com/bind/

$( "#foo" ).bind( "click", function() {
    alert( "User clicked on 'foo.'" );
});

将附加到选择器的函数视为列表，并根据触发的事件执行它们。使用您的代码，您将附加到＆＃39;列表＆＃39;每次调整大小，永不清除它们。

Answer 2

使用off()和on()以及全局变量布尔值

的组合

var clickAdded = ($(window).width() >= 1100) ? true : false,
    w = window;
$(window).on('resize', function () {  

    if ($(w).width() < 1100)
    {
        $('.portfolio-box-caption, .portfolio-box, .popup-gallery, .container-fluid').off('click');
        w.clickAdded = false;
    }
    else 
    {
        if (!w.clickAdded) {
            $('.portfolio-box-caption, .portfolio-box, .popup-gallery, .container-fluid').on('click', function(){
                w.clickAdded = true;
                //your JS
            });
        }
    }
});

为了防止添加多个点击处理程序，您需要检查它是否已经添加（因为如果窗口持续放大超过1100px，resize事件仍会触发）

jQuery的。单击会发生什么，然后页面调整大小

2 个答案: