如果窗口宽度小于 768px，则不触发函数

Posted 2023-05-09

【中文标题】如果窗口宽度小于 768px，则不触发函数

【英文标题】：If window is less than 768px wide, don't fire function

【发布时间】：2014-01-23 08:42:33

【问题描述】：

如果页面加载和调整大小时的窗口宽度小于 768 像素，我不想触发 showCover() 函数。使用下面的代码，即使窗口小于 768px，它仍然会被触发。

    function ipsThemeViewer() 

        jQuery(window).resize(function() 
           if ( jQuery(window).width() < 768 ) return false;
           showCover();
        ).resize();

    

    function showCover() 
        jQuery('#ipsThemeViewerScreen').hover(function () 
            var t = jQuery(this);
            jQuery('.cover').stop().fadeIn('fast');
        , function () 
            var t = jQuery(this);
            jQuery('.cover').stop().fadeOut('fast');
        );
    

【问题讨论】：

你明白.hover() 绑定事件处理程序，所以它们被一遍又一遍地绑定吗？这很糟糕。

【参考方案1】：

我会反过来：

jQuery(function($)   // DOM READY AND SECURE $ ALIAS

    var winIsSmall;

    function testWinSize()
        winIsSmall= $(window).width() < 768; // BOOLEAN
    

    $(window).on("load resize", testWinSize);

    $('#ipsThemeViewerScreen').hover(function ()             
        if(winIsSmall)
            // need something here?
        else
            $('.cover').stop().fadeToggle('fast');
        
    );

);

【讨论】：

我想我误解了一些基本的东西；但是：$(window).on('load resize', winIsSmall);?这不只是在load 和resize 上返回true/false 吗？那里的布尔值有什么用处吗？

@DavidThomas Woooops。编辑，我正忙着煮我的深夜咖啡。