如何在移动端禁用slick-lightbox放大效果并支持窗口resize？

你的代码问题在于每次窗口resize时都会重复绑定事件或初始化插件，导致逻辑混乱。下面是修复后的方案，能完美支持窗口尺寸变化：

jQuery(function($){
    // 保存slick lightbox实例，方便后续销毁
    let lightboxInstance = null;

    // 封装处理逻辑为函数，方便调用
    function handleLightboxState() {
        const windowWidth = $(window).width();
        
        if (windowWidth > 1024) {
            // 桌面端：如果实例未初始化，就创建；同时恢复a标签默认行为
            if (!lightboxInstance) {
                lightboxInstance = $('.slickLightPop').slickLightbox({
                    lazy: true
                });
            }
            // 解绑移动端添加的阻止默认行为事件
            $('.galleryItem a').off('click.lightboxDisable');
        } else {
            // 移动端：如果实例存在，销毁它；阻止a标签的lightbox触发
            if (lightboxInstance) {
                lightboxInstance.destroy();
                lightboxInstance = null;
            }
            // 用命名空间绑定事件，避免重复绑定
            $('.galleryItem a').off('click.lightboxDisable').on('click.lightboxDisable', function(e) {
                e.stopPropagation();
                e.preventDefault();
            });
        }
    }

    // 页面加载时执行一次
    handleLightboxState();

    // 窗口resize时执行，添加防抖避免频繁触发（可选但推荐）
    let resizeTimer;
    $(window).resize(function() {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(handleLightboxState, 250);
    });
});

关键优化点： #

• 用变量保存插件实例，确保初始化和销毁操作只执行一次，避免重复绑定导致的异常
• 给click事件添加命名空间lightboxDisable，解绑时更精准，不会影响其他可能绑定的click事件
• 添加防抖处理（250ms延迟），避免窗口resize过程中频繁触发逻辑，提升页面性能
• 桌面端主动恢复a标签的默认行为，确保窗口resize回桌面尺寸时功能正常

内容的提问来源于stack exchange，提问作者Wayne Goodman